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
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

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
No Yes Yes Yes Yes Yes
No Yes Yes Yes Yes Yes
No Yes Yes Yes Yes Yes
No Yes Yes Yes Yes Yes
No Yes Yes Yes Yes Yes
No Yes No Yes Yes Yes Yes
note on user interaction
No Yes Yes Yes Yes
No Yes Yes Yes Yes Yes
No Yes Yes Yes Yes Yes
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
No Yes Yes Yes Yes Yes
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
Useless; same information is in validity.valid No Yes Yes Yes Even on fieldsets! Yes

Also works on forms, but not on fieldsets.

Ought to pop up a native error message No Yes Yes Even on fieldsets! Yes
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
No Yes Yes Yes Yes Yes
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().

No Yes Yes No No No
No Yes Yes Yes Yes Yes
No Yes Yes Yes Yes
... when ? No onscroll onscroll onscroll 5s 5s
by returning false oninvalid No Yes Yes Yes Yes Yes
pattern only No Yes Yes No Yes Yes
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.
No Yes Yes Yes Yes Yes

Test pages