5

I have a credit card entry form on a site I help maintain. The back end is coded to take a 2 digit expiration month and 2 digit year in the format MM/YY. Chrome seems to be set on applying credit card information in the format MM/YYYY, and so if the user has a stored CC with expiration 05/2023 it will autofill with 05/20 and due to jquery input masking will cut off the 23 portion. This results in a declined payment, which no body wants.

Here's the basic example of the form.

<form action="/">
  <h3>Label</h3>
  <div>
    <input name="CardHolderName" placeholder="Cardholder Name" type="text">
  </div>
  <div>
    <input name="CreditCardNumber" placeholder="Credit Card Number" type="tel">
  </div>
  <div>
    <label for="ExpirationDate">Expirion Date</label>
    <input id="ExpirationDate" name="ExpirationDate" placeholder="MM/YY" type="tel">
  </div>
  <div>
    <input name="Cvv2" placeholder="CVC" type="tel">
  </div>
</form>

I have scanned https://wiki.whatwg.org/wiki/Autocomplete_Types and https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill and found autocomplete="cc-exp", and some guidance on format.

In the older spec, which is deprecated, the format somewhat matches what Chrome is doing, mentioning the MM/YYYY format when maxlength="7". In this case, maxlength="5" should give me what I want, but it's not consistent. For example, adding maxlength="5" works in my jsfiddle, but doesn't work on our web site. However, adding autocomplete="cc-exp" and maxlength="5" works on the web site with desktop Chrome, but not Chrome on Android it seems. Chrome on my Andrid phone still autofills with MM/YYYY.

The newer spec says the format is YYYY-MM, which doesn't match what Chrome is doing and thus is not helpful. There is no mention of any other accepted format.

This fiddle (https://jsfiddle.net/JonathanN/j054kbgx/) shows all the derivations of my original form, and all the results I have seen. It would be great if there were a 100% guaranteed way to tell the browser the format is MM/YY. Failing that, having more information on how these forms work for other people would be helpful too.

JonathanN
  • 672
  • 7
  • 17
  • Turned out the issue with Chrome on Android was a jquery library I was using, jquery InputMask. No shade on that product, but between Chromes obtuse CC heuristics and however InputMask works, it was causing Chrome to think the field should be in MM/YYYY format rather than MM/YY. I am guessing InputMask is changing/unsetting maxlength, and that was the issue. Ultimately, a spec that could set the autofill format would be nice, but it seems there's too many CC input form implementations that need to be supported and Chrome is leaning on a heuristic approach. – JonathanN Sep 05 '18 at 12:25

2 Answers2

2

I ran into this same issue - checked the Chrome spec for autofill and adding autocomplete="cc-exp-year" to the form field fixed it.

ok_anthony
  • 41
  • 3
  • I had one field with month and year combined, so it seems different situation. Glad you found fix for your thing though. – JonathanN Sep 25 '18 at 20:28
0

you need to do 'autocomplete' => 'off' on you expiry input and then make two inputs with cc-exp-month/cc-exp-year like this:

<input id="cardform-exp" autocomplete="off" placeholder="MM / YY">
<div style="opacity: 0;line-height: 1px;position:relative;">
   <input id="cardform-exp-month" autocomplete="cc-exp-month" style="height:34px;width: 20px;position: absolute;top: 100px;left: 30px;z-index: -100;">
   <input id="cardform-exp-year" autocomplete="cc-exp-year" style="height:34px;width: 20px;position: absolute;top: 100px;left: 80px;z-index: -100;">
</div>

after with js you cut month / year and replace it to expiry input:

$("#cardform-exp").val($("#cardform-exp-month").val() + ' / ' + $("#cardform-exp-year").val().substr(2, 2) );
labunskyi
  • 11
  • 1