HTML5 Guidelines for Web Developers

(coco) #1
3.4 Client-Side Form Validation 63

3.4.4 Summary of Validity Checks


Table 3.3 shows a summary of all input attributes and validity functions available
for validity checks, and the scenarios where they occur.


Table 3.3 Possible Errors During Validity Checks of Form Fields


Attribute/Function Problem
required No value was entered in the field.

type=email, url The entered value does not match the required type.
pattern The entered value does not match the required pattern.

maxlength The entered value is longer than allowed.
min, max The entered value is too small or too big.

step The required step size of the entered value has been
violated.
setCustomValidity() The additional criteria set for this field are not fulfilled.

3.4.5 Or Perhaps Better Not to Validate? “formnovalidate”


Now that we have spent so much time discussing error handling, we will tell you
how you can sneak past all the rules with the attribute formnovalidate. At first it
may seem a little strange to simply disregard all the laboriously defined rules and
just submit the form without validation. The specification offers a brief expla-
nation that quickly solves the mystery. The typical application for skipping the
validity check is a form that the user cannot or does not want to complete in one
go. By adding the formnovalidate attribute to a submit button, the content that
has been entered so far can be saved for later.


If you submit a form with formnovalidate, the fields already completed are sent
to the server. The server application is responsible for potentially saving the data
temporarily.

Imagine, for example, that you want to fill in a support form for your faulty digi-
tal camera. After spending ages filling in all the details about the error that has
occurred, the website asks you for the camera’s serial number. Because you do
not have the camera at hand and you do not want to lose all the information you
have already entered, you click the Save button and can then calmly go looking
for your camera. This button is defined as follows:


NOTE
Free download pdf