Constraints Validation API

Form validation

Back to the index

CSS form validation

With CSS only

Method or property	Internet Explorer				Edge 14	Firefox		Safari	UC 6.1	Chrome
Method or property	8	9	10	11	Edge 14	52 Win	52 Mac	10.1	UC 6.1	57 Win	57 Mac
:valid and :invalid On form fields, fieldsets, and forms. Really ought to work on labels as well, but it doesn’t.	No		Incomplete			Yes		Yes	Yes	Yes
	These pseudo-classes are re-evaluated with every keystroke. IE10/11/Edge only form fields; not min/maxlength
input:before/:after Should not work but mysteriously does sometimes.	No					No		Some	More	More
	Safari supports them on radios and checkboxes. UC and Chrome also support them on date-related types.

The validity property

With novalidate

Method or property	Internet Explorer				Edge 14	Firefox		Safari	UC 6.1	Chrome
Method or property	8	9	10	11	Edge 14	52 Win	52 Mac	10.1	UC 6.1	57 Win	57 Mac
badInput	No				Yes	Yes		Yes	Yes	Yes
badInput
patternMismatch	No		Yes			Yes		Yes	Yes	Yes
patternMismatch
rangeOverflow	No		Yes			Yes		Yes	Yes	Yes
rangeOverflow
rangeUnderflow	No		Yes			Yes		Yes	Yes	Yes
rangeUnderflow
stepMismatch	No		Yes			Yes		Yes	Yes	Yes
stepMismatch
tooLong	No		Yes		No	Yes		Yes	Yes	Yes
tooLong	note on user interaction
tooShort	No					Yes		Yes	Yes	Yes
tooShort
typeMismatch	No		Yes			Yes		Yes	Yes	Yes
typeMismatch
valid	No		Yes			Yes		Yes	Yes	Yes
valid
valueMissing	No		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().

Method or property	Internet Explorer				Edge 14	Firefox		Safari	UC 6.1	Chrome
Method or property	8	9	10	11	Edge 14	52 Win	52 Mac	10.1	UC 6.1	57 Win	57 Mac
invalid	No		Yes			Yes		Yes	Yes	Yes
invalid
valid	No					No		No	No	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

Method or property	Internet Explorer				Edge 14	Firefox		Safari	UC 6.1	Chrome
Method or property	8	9	10	11	Edge 14	52 Win	52 Mac	10.1	UC 6.1	57 Win	57 Mac
checkValidity() Useless; same information is in `validity.valid`	No		Yes			Yes		Yes	Even on fieldsets!	Yes
	Also works on forms, but not on fieldsets.
reportValidity() Ought to pop up a native error message	No					Yes		Yes	Even on fieldsets!	Yes
reportValidity() Ought to pop up a native error message
setCustomValidity('string') Sets error message to string and assumes field is invalid	No		Yes			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.

Native error messages

Method or property	Internet Explorer				Edge 14	Firefox		Safari	UC 6.1	Chrome
Method or property	8	9	10	11	Edge 14	52 Win	52 Mac	10.1	UC 6.1	57 Win	57 Mac
Basic support	No		Yes			Yes		Yes	Yes	Yes
Basic support
novalidate attribute on forms. Suppresses error messages	No		Yes			Yes		Yes	Yes	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		Yes			Yes		No	No	No
Outline on invalid fields
Appear onsubmit	No		Yes			Yes		Yes	Yes	Yes
Appear onsubmit
Appear with reportValidity()	No					Yes		Yes	Yes	Yes
Appear with reportValidity()
Message disappears ... when ?	No		onscroll			onscroll		onscroll	5s	5s
Message disappears ... when ?
Suppress message by returning false oninvalid	No		Yes			Yes		Yes	Yes	Yes
Suppress message by returning false oninvalid
Set text in title attribute `pattern` only	No		Yes			Yes		No	Yes	Yes
Set text in title attribute `pattern` only
onblur validation	No		Special			Incomplete		Terrible	Terrible	Terrible
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 does not show the error message if you focus on a form field other than the next one. 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.
setCustomValidity() changes error message	No		Yes			Yes		Yes	Yes	Yes
setCustomValidity() changes error message
Method or property	Internet Explorer				Edge 14	Firefox		Safari	UC 6.1	Chrome
Method or property	8	9	10	11	Edge 14	52 Win	52 Mac	10.1	UC 6.1	57 Win	57 Mac

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

Desktop browser test array 3.1; April 2017

IE 8, 9, and 10: Trident; On separate Windows 7 virtualizations as downloaded from Modern IE.
IE11: Trident; On Windows 8.1 virtualization as downloaded from Modern IE.
Edge 13: MS Edge 13; On Surface Book with Windows 10.
Firefox 47: Gecko 47; 47.0.1 on Win10 and Mac
Safari 10.1: WebKit; 10.1 on Mac
Chrome 51: Chromium 51; 51 on Win10 and Mac
UC 5.6: Chromium 48; 5.6 on Windows 10

Operating systems

Mac: Mac Mini with OS 10.11.15; This is my main test station. It also runs all virtual Windows systems.
Windows 7 and 8.1: All downloaded from modern.ie. I use Parallels, and downloded the Windows 7 systems for all browsers but IE11, which runs on Windows 8.1.
Windows 10: Microsoft Surface Book with Windows 10