Form tests - native errors

Back to index.

Edge shows error message every time you focus on a field. Useful!

FF and Edge show red borders around every incorrect field.

onblur reportValidity: Chrome refuses to move from field; FF shows error message but only when you go down in form; Edge seems to do a secret check whenever you focus on the field and show first title, then error message.

ANY reportValidity in Chrome: focus refuses to budge from invalid field because it is immediately focused again.

When do native error messages appear? How can you suppress them?

The tests
  1. To prepare the test, go down to the min- and maxlength example fields and manually remove one character from each field.
    Yes, this is really necessary. Stupid browsers.
  2. First submit the form with the regular submit button below.
    Expectation: First invalid field gets error message and focus; other invalid fields get red outline.

  3. Expectation: the field gets focus and error message.

  4. Expectation: the LAST invalid field gets focus and error message.
  5. Now check this box and repeat tests 2 and 3. (We now return false oninvalid)
    Expectation: focus remains the same, but the error message is not shown.
  6. Now check this box, which enables individual onblur validation for all fields, and then use the keyboard to tab through the form fields.
    Expected result: if field is invalid browser shows error message and possibly focuses on field.
  7. . Now try all tests again. The error message should be changed, and all fields should be invalid, but otherwise it ought to work the same.

Test fields

All fields have an error.