Does not work with bootstrap form html layout

[coderdave]

For example, if I change the select box html to:

  <div class="control-group">
    <label for="cc_type">Card Type</label>
      <div class="controls">
        <select id="card_type">
          <option value="">...</option>
          <option value="visa">Visa</option>
          <option value="discover">Discover</option>
          <option value="mastercard">MasterCard</option>
          <option value="maestro">Maestro</option>
          <option value="jcb">JCB</option>
          <option value="unionpay">China UnionPay</option>
          <option value="amex">American Express</option>
          <option value="dinersclubintl">Diners Club</option>
        </select>
      </div>
  </div>

I get the following error:
Uncaught TypeError: Cannot read property 'length' of undefined

It would be nice if the no-js html was customizable so that the fallback form will look decent in bootstrap (or whatever framework one might be using).

[kenkeiter]

The issue that you're encountering is that you've changed the the select element's id attribute without letting Skeuocard know about it. When you instantiate a new Skeuocard instance, you should provide the typeInputSelector a value of something like: '[name="cc_type"]'.

The only thing you need to do is ensure that all of the required fields are within a containing element of some sort, and that the containing element is passed to Skeuocard upon instantiation.

As a side note, you can find this information under the Changing Underlying Value Selectors header in README.md.

[coderdave]

Sorry, I should have shown the default layout because I'm using custom fields.

It also breaks when using the default field names:

  <div class="control-group">
    <label for="cc_type">Card Type</label>
    <div class="controls">
      <select name="cc_type">
        <option value="">...</option>
        <option value="visa">Visa</option>
        <option value="discover">Discover</option>
        <option value="mastercard">MasterCard</option>
        <option value="maestro">Maestro</option>
        <option value="jcb">JCB</option>
        <option value="unionpay">China UnionPay</option>
        <option value="amex">American Express</option>
        <option value="dinersclubintl">Diners Club</option>
      </select>
    </div>
  </div>

The error occurs specifically on this line:
https://github.com/kenkeiter/skeuocard/blob/master/javascripts/skeuocard.js#L172

[MatayoshiMariano]

It happens the same to me, any solution?