Form validation

Back to the index

See also the mobile table.

Last updated on 11 April 2017.

CSS form validation

With CSS only

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

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

Method or property Internet Explorer Edge 14 Firefox Safari UC 6.1 Chrome
8 9 10 11 52 Win 52 Mac 9.1.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
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
8 9 10 11 52 Win 52 Mac 9.1.1 57 Win 57 Mac
Basic support
 No Yes Yes Yes Yes Yes
novalidate
attribute on forms. Suppresses error messages 		No Yes Yes Yes Yes Yes

<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
Appear onsubmit
 No Yes Yes Yes Yes Yes
Appear with reportValidity()
 No Yes Yes Yes Yes
Message disappears
... when ? 		No onscroll onscroll onscroll 5s 5s
Suppress message
by returning false oninvalid 		No Yes Yes Yes Yes Yes
Set text in title attribute
pattern only 		No Yes Yes No Yes Yes
onblur validation
 No Special Only down Terrible Terrible Terrible 
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.
setCustomValidity() changes error message
 No Yes Yes Yes Yes Yes

Test pages