How to format credit card input fields and expiry date

Question

Is there a way to code this with html/css?

I want to format it so two digits either side of the "/" in the expiry box. I have just places the "/" in the form on my web page to show what I am trying to do.

Credit Card Number:
<input class="inputCard" type="text" name="creditCard1" id="creditCard1"/>
-
<input class="inputCard" type="text" name="creditCard2" id="creditCard2"/>
-
<input class="inputCard" type="text" name="creditCard3" id="creditCard3"/>
-
<input class="inputCard" type="text" name="creditCard4" id="creditCard4"/>
<br />
Card Expiry:
<input class="inputCard" type="text" name="expiry" id="expiry"/>

I want to format it so it will only accept four numbers in each credit card text box.

CreditCardForm

I don't need the code to validate my data with javascript (I know how to do this). I am struggling with the html design.

You can use `maxlength="4"`, but it won't skip to the next box, and they can enter letters+numbers. If you want that functionality, you need Javascript. #2 requires Javascript as well. — Tim Withers, Jun 10 '13 at 05:04
@TimWithers are you referring to maxlength in the html? Please bear with me. — , Jun 10 '13 at 05:09
For the expiration date, you could use drop down menus instead of inputs. — DACrosby, Jun 10 '13 at 05:11
@DACrosby yes I thought about that, but aren't there too many vairiations? — , Jun 10 '13 at 05:14
@Yvette Too many variations for expiration date? Not really - there's only 12 months and you wouldn't need to put more than a handful of years in. 2 separate dropdowns (one for month, one for year). — DACrosby, Jun 10 '13 at 05:29
@DACrosby Can you please put this in an answer so I can mark it answered ty — , Jun 10 '13 at 05:30
You may want to look into something like: http://creditcardjs.com/ — Doug, Sep 06 '14 at 18:39

DACrosby · Accepted Answer · 2021-01-28T02:54:36.747

I'd say do something like this:

Card Expiration:
<select name='expireMM' id='expireMM'>
    <option value=''>Month</option>
    <option value='01'>January</option>
    <option value='02'>February</option>
    <option value='03'>March</option>
    <option value='04'>April</option>
    <option value='05'>May</option>
    <option value='06'>June</option>
    <option value='07'>July</option>
    <option value='08'>August</option>
    <option value='09'>September</option>
    <option value='10'>October</option>
    <option value='11'>November</option>
    <option value='12'>December</option>
</select> 
<select name='expireYY' id='expireYY'>
    <option value=''>Year</option>
    <option value='20'>2020</option>
    <option value='21'>2021</option>
    <option value='22'>2022</option>
    <option value='23'>2023</option>
    <option value='24'>2024</option>
</select> 
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4"/>

Then just add a piece of Javascript or jQuery to combine the values from expireMM and expireYY and set it as the value for expiry. I'd prefer doing it all server-side in PHP, but that depends on your exact setup. Either way, this is a common way to handle expiration dates.

wakqasahmed · Answer 2 · 2021-10-09T11:30:31.830

0

Following code will work for you, however it is not a good practice as html5 is not fully supported by each and every browser in different devices. (better to use plugin like http://digitalbush.com/projects/masked-input-plugin/ )

Credit Card Number:
      <input class="inputCard" type="tel" pattern="[0-9]*" maxlength="4" name="creditCard1" id="creditCard1" required/>
      -
      <input class="inputCard" type="tel" pattern="[0-9]*" maxlength="4" name="creditCard2" id="creditCard2" required/>
      -
      <input class="inputCard" type="tel" pattern="[0-9]*" maxlength="4" name="creditCard3" id="creditCard3" required/>
      -
      <input class="inputCard" type="tel" pattern="[0-9]*" maxlength="4" name="creditCard4" id="creditCard4" required/>
      <br />
      Card Expiry:
      <input class="inputCard" name="expiry" id="expiry" type="month" required/>

https://jsfiddle.net/mastermindw/sa4dcLu7/

Old Solution (contained bug, doesn't allow leading zeros. Thanks @kristopolous) http://jsfiddle.net/mastermindw/dUtJV/

edited Oct 09 '21 at 11:30

answered Jun 10 '13 at 05:25

wakqasahmed

2,059
1
18
23

using xhtml you can only restrict user (for instance using maxlength) but cannot validate, html5 provides you this facility but it is not supported fully yet. Better to go with fallback plugin which will do exactly what you wanna do! http://digitalbush.com/projects/masked-input-plugin/ – wakqasahmed Jun 10 '13 at 05:32
then simply try these resources. http://www.w3resource.com/javascript/form/credit-card-validation.php http://www.the-art-of-web.com/javascript/validate/3/#.UbVlw_lkPQg – wakqasahmed Jun 10 '13 at 05:39
This code has bugs. it doesn't allow leading 0s in the groups ... don't use it. – kristopolous Oct 08 '21 at 23:57
Thanks @kristopolous for pointing out, I was so naive, this is such an old thread. The new solution is hackish but it is based on the same thinking as in year 2013. – wakqasahmed Oct 09 '21 at 11:34

How to format credit card input fields and expiry date

2 Answers2

Linked