Constraints Validation API

Form validation — mobile

Back to the index

CSS form validation

With CSS only

	iOS		iOS WebView		And. 4	AWK WebView	Chromium									Chromium WebView					UC 11	BlackBerry 10	Dolphin	Opera Mini		IE 11	Edge 14	Firefox 50
	9	10	9	10	And. 4	AWK WebView	LG	Cy	HTC	S34	MM	S44	Xia	S51	Go	30	33	39	45	54	UC 11	BlackBerry 10	Dolphin	11	21	IE 11	Edge 14	Firefox 50
:valid and :invalid On form fields, fieldsets, and forms. Really ought to work on labels as well, but it doesn’t.	Yes				Incomplete		Incomplete					Yes				Incomplete			Yes		Incomplete			Static		Incomplete		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
input:before/:after 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 WebView	Chromium									Chromium WebView					UC 11	BlackBerry 10	Dolphin	Opera Mini		IE 11	Edge 14	Firefox 50
	9	10	9	10	And. 4	AWK WebView	LG	Cy	HTC	S34	MM	S44	Xia	S51	Go	30	33	39	45	54	UC 11	BlackBerry 10	Dolphin	11	21	IE 11	Edge 14	Firefox 50
badInput	Yes				No		?	Yes	?	Yes						?	Yes		?	Yes	No	Yes	-	-		No	Yes
badInput	Two Chromia don’t allow invalid numbers to be typed in.
patternMismatch	Yes				Yes		Yes									Yes					Yes			Yes		Yes
patternMismatch
rangeOverflow	Yes				Yes		Yes									Yes					Yes			Yes		Yes
rangeOverflow
rangeUnderflow	Yes				Yes		Yes									Yes					Yes			Yes		Yes
rangeUnderflow
stepMismatch	Yes				Yes		Yes									Yes					Yes			Yes		Yes
stepMismatch
tooLong	Yes				Yes		Yes									Yes					Yes			-		Yes	No	Yes
tooLong	note on user interaction
tooShort	No	Yes	No	Yes	No		No					Yes				No			Yes		No			-		No		Yes
tooShort	Safari/iOS does not support minlength so I cannot test this property.
typeMismatch	Yes				Yes		Yes									Yes					Yes			Incomplete		Yes
typeMismatch	Op mini not email
valid	Yes				Yes		Yes									Yes					Yes			Incomplete		Yes
valid	Op mini not email
valueMissing	Yes				Yes		Yes									Yes					Yes			Yes		Yes
valueMissing

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 WebView	Chromium									Chromium WebView					UC 11	BlackBerry 10	Dolphin	Opera Mini		IE 11	Edge 14	Firefox 50
	9	10	9	10	And. 4	AWK WebView	LG	Cy	HTC	S34	MM	S44	Xia	S51	Go	30	33	39	45	54	UC 11	BlackBerry 10	Dolphin	11	21	IE 11	Edge 14	Firefox 50
invalid	No	Yes	No	Yes	No		Yes									No	Yes				Yes			Untestable		Yes
invalid	Some browsers don’t support `reportValidity()`, but those that do all fire the invalid event.
valid	No				No		No									No					No			Untestable		No
valid	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 WebView	Chromium									Chromium WebView					UC 11	BlackBerry 10	Dolphin	Opera Mini		IE 11	Edge 14	Firefox 50
	9	10	9	10	And. 4	AWK WebView	LG	Cy	HTC	S34	MM	S44	Xia	S51	Go	30	33	39	45	54	UC 11	BlackBerry 10	Dolphin	11	21	IE 11	Edge 14	Firefox 50
checkValidity() Useless; same information is in `validity.valid`	Almost				Almost		Almost					Yes			Almost	Buggy	Almost		Yes	Almost	Almost			Almost		Almost
	Also works on forms, but not on fieldsets. Almost: not on fieldset (well, always returns true) Chromium 30 WebView always returns `true`.
reportValidity() Ought to pop up a native error message	No	Almost	No	Almost	No		No					Yes			Almost	No			Yes		No			No		No		Yes
reportValidity() Ought to pop up a native error message	Almost: not on fieldset (well, always returns true)
setCustomValidity('string') 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 WebView	Chromium									Chromium WebView					UC 11	BlackBerry 10	Dolphin	Opera Mini		IE 11	Edge 14	Firefox 50
	9	10	9	10	And. 4	AWK WebView	LG	Cy	HTC	S34	MM	S44	Xia	S51	Go	30	33	39	45	54	UC 11	BlackBerry 10	Dolphin	11	21	IE 11	Edge 14	Firefox 50
Basic support	No	Yes	No	Yes	No		*	Yes								No	Yes				Yes			No		No		Yes
Basic support	LG Chromium 30 does everything right except actually showing the error message.
novalidate attribute on forms. Suppresses error messages	No	Yes	No	Yes	No		Yes									No	Yes				Yes			Untestable		Yes
novalidate attribute on forms. Suppresses error messages	`<form novalidate>` stops onsubmit native error messages and the associated focus. It does not stop native error messages from appearing with `reportValidity()`.
Outline on invalid fields	No				No		No									No					No			No		Yes
Outline on invalid fields	What I mean here is a permanent outline; not the temporary one that’s caused by the focus.
Appear onsubmit	No	Yes	No	Yes	No		Yes									No	Yes				Yes			No		No		Yes
Appear onsubmit
Appear with reportValidity()	No	Yes	No	Yes	No		No					Yes				No			Yes		No			No		No		Yes
Appear with reportValidity()	Some browsers don’t support `reportValidity()`.
Message disappears ... when ?	No	onscroll	No	onscroll	No		-	stdChr					Yes	stdChr		No	stdChr				5s			No		No		doesn’t
Message disappears ... when ?	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.
Suppress message by returning false oninvalid	No	Yes	No	Yes	No		Yes									No	Yes				Yes			No		No		Yes
Suppress message by returning false oninvalid
Set text in title attribute `pattern` only	No				No		-	Yes								No	Yes				Yes			No		No		Yes
Set text in title attribute `pattern` only
onblur validation	No	Terrible	No	Terrible	No		No					Terrible				No			Terrible		No			No		No		No
onblur validation	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.
setCustomValidity() changes error message	No	Yes	No	Yes	No		-	Yes								No	Yes				Yes			No		No		Yes
setCustomValidity() changes error message	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

Properties; automated tests of most validity properties
Properties 2; manual test of tooShort, tooLong, and badInput
CSS Validation; :valid and :invalid. How the different form fields react
Events; when does the invalid event fire? Also contains test for valid event, which does not exist
Error messages; the default texts of the error messages.
Native errors; how to show and hide native error messages
Custom validity; basic functions of setCustomValidity()
Methods; automated test of the three form validation methods
novalidate attribute

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