Form validation — mobile

Back to the index

See also the desktop table.

Last updated on 11 April 2017.

CSS form validation

With CSS only

iOS iOS WebView And. 4 AWK Web­View Chromium Chromium WebView UC 11 Black­Berry 10 Dol­phin Opera Mini IE 11 Edge 14 Fire­fox 50
9 10 9 10 LG Cy HTC S34 MM S44 Xia S51 Go 30 33 39 45 54 11 21
On form fields, fieldsets, and forms.
Really ought to work on labels as well, but it doesn’t.
Yes Incom­plete Incom­plete Yes Incom­plete Yes Incom­plete Static Incom­plete Yes

These pseudo-classes are re-evaluated with every keystroke.

  • Safari 9: minlength not supported
  • Imcomplete: no minlength, no forms and fieldsets
  • Gchromium 44+: everything supported
  • Static Op Mini
  • Edge no maxlength either
Should not work but mysteriously does sometimes. Yes Yes Yes Yes Yes No No
  • Safari anc Chrome BB support them on radios, checkboxes, and date-related types.
  • AW, UC Dolphin: radios and checkboxes

The validity property

With novalidate

iOS iOS WebView And. 4 AWK Web­View Chromium Chromium WebView UC 11 Black­Berry 10 Dol­phin Opera Mini IE 11 Edge 14 Fire­fox 50
9 10 9 10 LG Cy HTC S34 MM S44 Xia S51 Go 30 33 39 45 54 11 21
Yes No ? Yes ? Yes ? Yes ? Yes No Yes - - No Yes

Two Chromia don’t allow invalid numbers to be typed in.

Yes Yes Yes Yes Yes Yes Yes
Yes Yes Yes Yes Yes Yes Yes
Yes Yes Yes Yes Yes Yes Yes
Yes Yes Yes Yes Yes Yes Yes
Yes Yes Yes Yes Yes - Yes No Yes
note on user interaction
No Yes No Yes No No Yes No Yes No - No Yes
  • Safari/iOS does not support minlength so I cannot test this property.
Yes Yes Yes Yes Yes Incom­plete Yes
Op mini not email
Yes Yes Yes Yes Yes Incom­plete Yes
Op mini not email
Yes Yes Yes Yes Yes Yes Yes

The events

The invalid event is supposed to fire when the user submits the form, or on checkValidity() or reportValidity().

iOS iOS WebView And. 4 AWK Web­View Chromium Chromium WebView UC 11 Black­Berry 10 Dol­phin Opera Mini IE 11 Edge 14 Fire­fox 50
9 10 9 10 LG Cy HTC S34 MM S44 Xia S51 Go 30 33 39 45 54 11 21
No Yes No Yes No Yes No Yes Yes Untest­able Yes

Some browsers don’t support reportValidity(), but those that do all fire the invalid event.

No No No No No Untest­able No

It stands to reason that if we have an invalid event we should also have a valid event.

Browsers are not impressed by our attempt at reasoning. We counter by not being impressed by browsers.

Methods

iOS iOS WebView And. 4 AWK Web­View Chromium Chromium WebView UC 11 Black­Berry 10 Dol­phin Opera Mini IE 11 Edge 14 Fire­fox 50
9 10 9 10 LG Cy HTC S34 MM S44 Xia S51 Go 30 33 39 45 54 11 21
Useless; same information is in validity.valid Al­most Al­most Al­most Yes Al­most Buggy Al­most Yes Al­most Al­most Al­most Al­most

Also works on forms, but not on fieldsets.

Almost: not on fieldset (well, always returns true)
  • Chromium 30 WebView always returns true.
Ought to pop up a native error message No Al­most No Al­most No No Yes Al­most No Yes No No No Yes
Almost: not on fieldset (well, always returns true)
Sets error message to string and assumes field is invalid Yes Yes Yes Buggy Yes Yes Yes Yes

Sets error message to string and assumes field is invalid

Empty string: reset error message and assume field is valid

No string: error. Stupid browsers.

  • Chromium 30 WebView: reportValidity() does not return false after setCustomValidity() has been used. That kind-of defeats the entire purpose.

Native error messages

iOS iOS WebView And. 4 AWK Web­View Chromium Chromium WebView UC 11 Black­Berry 10 Dol­phin Opera Mini IE 11 Edge 14 Fire­fox 50
9 10 9 10 LG Cy HTC S34 MM S44 Xia S51 Go 30 33 39 45 54 11 21
No Yes No Yes No * Yes No Yes Yes No No Yes
  • LG Chromium 30 does everything right except actually showing the error message.
attribute on forms. Suppresses error messages No Yes No Yes No Yes No Yes Yes Untest­able Yes

<form novalidate> stops onsubmit native error messages and the associated focus. It does not stop native error messages from appearing with reportValidity().

No No No No No No Yes

What I mean here is a permanent outline; not the temporary one that’s caused by the focus.

No Yes No Yes No Yes No Yes Yes No No Yes
No Yes No Yes No No Yes No Yes No No No Yes

Some browsers don’t support reportValidity().

... when ? No onscroll No onscroll No - stdChr Yes stdChr No stdChr 5s No No doesn’t
  • Safari’s error messages disappear onscroll, which is a serious problem. If you hit submit, and an error message appears and the focus moves to the faulty field, the browser automatically scrolls, which causes the error message to disappear.
  • stdchr: Standard Chrome: error message disappears after 5 seconds or if form field scrolls off the screen. And remember that due to the focus the keyboard is folded out, so the screen is far smaller than usual.
by returning false oninvalid No Yes No Yes No Yes No Yes Yes No No Yes
pattern only No No - Yes No Yes Yes No No Yes
No Terrible No Terrible No No Terrible No Terrible No No No No
input.onblur = function () {
	this.reportValidity();
}
  • IE/Edge natively repeat the error message when you focus on a form field. Strictly speaking they don’t need onblur validation.
  • Firefox only shows the error message if you tab down. Tabbing up (i.e. shift+tab) doesn’t show the message.
  • In Safari the error message briefly appears and then disappears. Then the focus is re-set on the field you just attempted to leave.
  • In UC and Chrome the error message doesn’t appear even briefly, and then the focus is re-set.
  • FF: shows errors on any field you focus on. This makes the onblur script unnecessary.
No Yes No Yes No - Yes No Yes Yes No No Yes
  • Chromia up to 44 set the new error message and append the title attribute. This is something Chrome desktop does not do.
UC BB dolphin show title

Test pages

Tested browsers

Mobile browser test array 3.3; February 2017

iOS 9
WebKit 601
Default browser on iPhone 4S with iOS 9.3.5
iOS 10
WebKit 601
Default browser on iPad Air 2 with iOS 10.0.2
iOS 9 WebView
WebKit 602
Chrome/iOS on iPhone 4S with iOS 9.3.5
iOS 10 WebView
WebKit 602
Chrome/iOS on iPad Air 2 with iOS 10.0.2
Android WebKit 4
WebKit 534
Default browser on Huawei C8813, Android 4.1.1
Default browser on Samsung Galaxy Note I, Android 4.1.2
Default browser on Sony Xperia S, Android 4.1.2
Default browser on LG L5, Android 4.1.2
Default browser on Wolfgang AT-AS45FW, Android 4.2.2 (see note below)
Default browser on HTC One X, Android 4.2.2
Android 4 WebView
WebKit 534
WebView on Samsung Galaxy Note I, Android 4.1.2
WebView on Sony Xperia S, Android 4.1.2
WebView on HTC One X, Android 4.2.2
WebView on Wolfgang AT-AS45FW, Android 4.2.2 (see note below)
All these WebViews were tested with the HTML5Test Android app.
Chromium LG 30
Blink; Chromium 30
Default browser on LG L70, Android 4.4.2
Chromium Cyanogen 33
Blink; Chromium 33
Default browser on Galaxy Nexus flashed with Cyanogenmod 11, Android 4.4.4
Chromium HTC 33
Blink; Chromium 33
Default browser on HTC M8, Android 6.0
Chromium Samsung 34
Blink; Chromium 34
Samsung Internet 2.1 on Samsung Galaxy S4, Android 5.0.1
Chromium Micromax 39
Blink; Chromium 39
Default browser on Micromax Canvas Nitro 3 Android 5.1
Chromium Samsung 44
Blink; Chromium 38
Samsung Internet 4.0 on Samsung Galaxy S6, Android 6.0.1
Chromium Xiaomi 46
Blink; Chromium 46
Miui browser 8.2 on Xiaomi M2, Android 5.0.2
Chromium Samsung 51
Blink; Chromium 52
Samsung Internet 5.0 on Samsung Galaxy S7
Chromium Google 56
Blink; Chromium 56
Default browser on Motorola Moto G, Android 5.1
This is Google’s regular Chrome. I test it only on devices where it is the default browser.
Chromium WebView 30
Blink; Chromium 30
WebView on LG L70, Android 4.4.2
All these WebViews were tested with the HTML5Test Android app.
Chromium WebView 33
Blink; Chromium 33
WebView on Galaxy Nexus flashed with Cyanogenmod 11, Android 4.4.4
Chromium WebView 39
Blink; Chromium 39
WebView on Micromax Canvas Nitro 3 Android 5.1
Chromium WebView 45
Blink; Chromium 45
WebView on HTC M8, Android 6.0
Chromium WebView 54
Blink; Chromium 54
WebView on Samsung Galaxy S6, Android 6.0.1
All these WebViews were tested with the HTML5Test Android app.
UC 11
WebKit 534
UC 11.0.5 on Samsung Galaxy S6, Android 6.0.1
BlackBerry 10
WebKit 537
Default browser on BlackBerry Z30 (BB OS 10.3.2)
Dolphin
Probably WebKit 537
Dolphin 11.5.7 with JetPack on Samsung Galaxy S4, Android 5.0.1
Independent full browser for Android, as long as you install both Dolphin and the Jetpack extension.
It claims to be a Chromium 33, but it lies. (Evidence: it does not support the pointer media query, while Chromium 33 does.)
Opera Mini 11
Presto
Proxy browser
11 on Intex Agua Super, Android 5.1. It is the default browser on this device; that’s why included this old version
Opera Mini 21
Presto
Proxy browser
21 on Motorola Moto G, Android 5.1
IE11
Trident
Default browser on Nokia Lumia 820, Windows Phone 8.1 “Update”
This is a developer phone. That might matter.

Edge 14
Edge
Default browser on Nokia Lumia 830, Windows 10 Mobile
Firefox Android
Gecko 50
50 on Motorola Moto G, Android 5.1