CODEWITHSUNDEEP
formsautocompletedate-formattingcredit-cardautofill
Tash
Tash

Reputation: 61

Autocomplete credit card expiry cc-exp not filling in the desired format

I've recently discovered that my credit card expiry date is not being populated by the browser autocomplete even though Name and Card number populate fine. The field does highlight as if it wants fill, it just doesn't get a value.

I have looked at other sites with working forms for differences and found that changing the expiry date to type="tel" allows it to be filled, but the format is MM/YYYY. I can add maxlength="5" to change the format to MM/YY but I want the format to be MMYY without the slash. A maxlength="4" fails to fill.

Here's my code without any of the noted workarounds. I don't feel that tel is the appropriate input type but it's good to give a numerical keyboard on mobile devices when the input is only numbers.

Please can you share your wisdom on ways to autofill the credit card expiry date in a MMYY format without a slash separator?

.standardControl {
    margin-bottom: 10px;
}
.standardControl label {
    display: block;
}
    <form action="" method="post">     
      <div class="standardControl">
        <label for="Name">Name on card</label>
        <input type="text" class="text" id="Name" name="Name" value="">
      </div>
      <div class="standardControl">
        <label for="CardNumber">Card number</label>
        <input type="number" class="number" id="CardNumber" name="CardNumber" 
           autocomplete="cc-number">
      </div>
      <div class="standardControl">
        <label for="ExpiryDate">Expiry date 
            <span class="additionLabel">(MMYY)</span></label>
        <input type="number" class="number" id="ExpiryDate" name="ExpiryDate"
            autocomplete="cc-exp" placeholder="MMYY" value="">
      </div>
      <div class="standardControl">
        <label for="securityCode">Security code</label>
        <input type="number" class="number" id="securityCode" name="securityCode">
      </div>
    </form>

Upvotes: 3

Views: 1172

Answers (1)

mohiwalla
mohiwalla

Reputation: 51

I encountered the same problem and the reason was the older expiry date than today.

Upvotes: 0

Related Questions