0

I want to avoid user entering any non-numeric characters. This is my text field:

<input id="cvv" name="cvv" type="text" minlength="3" pattern="[0-9]*" required="required" placeholder="000" size="3" maxlength="3">

This works fine in Desktop browsers. But this doesnt work in Android/Chrome browser. Any help? Thanks.

FakirTrappedInCode
  • 649
  • 9
  • 29

2 Answers2

0

HTML 5 features are not completely supported in Mobile browsers yet. Check the compatibility here - see Browser Compatibility section and here.

You may use "number" input type which is supported from Android 4. 

<input id="cvv" name="cvv" type="number" required="required" placeholder="000" />

Also you can use JavaScript to validate using onkeypress or onblur events.

Shankar
  • 626
  • 7
  • 19
  • “The type=number state is not appropriate for input that happens to only consist of numbers but isn't strictly speaking a number. For example, it would be inappropriate for credit card numbers or US postal codes.” http://www.w3.org/TR/html5/forms.html#number-state-%28type=number%29 – Jukka K. Korpela Jul 21 '14 at 18:47
  • Yes, the requirement here is just number, not credit card numbers or something. – Shankar Jul 22 '14 at 05:00
  • A CVV is a password-like string (just consisting of digits), not “strictly speaking a number”. The code in the answer is invalid: for `type=number`, the attributes `size`, `minlength`, and `maxlength` are not allowed. – Jukka K. Korpela Jul 22 '14 at 05:14
  • Apologies for the incorrect attributes, I missed those. But for CVV can't we use type=number and do client side validation for 0 and maxlength? – Shankar Jul 22 '14 at 07:15
  • Even type="number" needs further validation as in iPhone you can find the numeric keyboard allowing * and #. Also we could copy/paste characters(though we can counter this too). I think out of all these problems @alexander farkas polyfill solution for inputmode="numeric" is great. – FakirTrappedInCode Jul 22 '14 at 17:16
  • Just wanting to chime in on those saying `input type="number"` is not suitable for credit card numbers... yes, it is. Just because **you** usually type it in with spaces or hyphens does not mean it's wrong to limit the input to numbers-only. Also, the pattern `[0-9]{3,4}` covers all possible CVV/CSC values to date. Just make sure to don't remove leading zeros by casting it to an integer (eg: treat as string) when parsing the input ;) – Mavelo Nov 01 '18 at 21:15
0

Android browsers do not support HTML5 form features before version 4.4.

To perform client-side pre-checks on form data by patterns (and requiredness) on browsers that do not support HTML5 features, you need to use JavaScript. There are many libraries for that, but in a simple case like this, it might be easier to code it yourself. The details depend on the desired error handling.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390