If your form inputs are inside of <div>s or other markup, they will be removed when skeuocard does its sweep. The simplest solution to me was just to hide them rather than removing them, but perhaps there's a better one.
To test what happens with the existing code, try the following code instead of the example provide (just added a div wrapper around the cc_number):
<div class="credit-card-input no-js" id="skeuocard">
<p class="no-support-warning">
Either you have Javascript disabled, or you're using an unsupported browser, amigo! That's why you're seeing this old-school credit card input form instead of a fancy new Skeuocard. On the other hand, at least you know it gracefully degrades...
</p>
<label for="cc_type">Card Type</label>
<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 class="test">
<label for="cc_number">Card Number</label>
<input type="text" name="cc_number">
</div>
<label for="cc_exp_month">Expiration Month</label>
<input type="text" name="cc_exp_month" id="cc_exp_month" placeholder="00">
<label for="cc_exp_year">Expiration Year</label>
<input type="text" name="cc_exp_year" id="cc_exp_year" placeholder="00">
<label for="cc_name">Cardholder's Name</label>
<input type="text" name="cc_name" id="cc_name" placeholder="John Doe">
<label for="cc_cvc">Card Validation Code</label>
<input type="text" name="cc_cvc" id="cc_cvc" placeholder="123" maxlength="3" size="3">
</div>
When you try to create your new Skeuocard object in console, at least in Chrome, you'll get the following error: TypeError: Cannot read property 'length' of undefined
If your form inputs are inside of
<div>s or other markup, they will be removed when skeuocard does its sweep. The simplest solution to me was just to hide them rather than removing them, but perhaps there's a better one.To test what happens with the existing code, try the following code instead of the example provide (just added a div wrapper around the cc_number):
When you try to create your new Skeuocard object in console, at least in Chrome, you'll get the following error:
TypeError: Cannot read property 'length' of undefined