Validating Input

In addition to providing instructions, validate user input to help users avoid mistakes. HTML5 provides a range of built-in functionality to validate common types of input, such as email addresses and dates. In some cases, such as for custom controls, additional scripting may be necessary to validate user input.

Validating required input

Forms frequently include required input that needs to be clearly highlighted using labels. In addition, the required attribute can be added to the form element, to indicate this requirement programmatically. Most current web browsers support this attribute. They will communicate missing required input to the user, using standard web browser dialog mechanisms. These dialogs are expected to respect the settings and preferences of the user in the web browser (and operating system), such as default font-size, colors, and language.

In the example below, the required attribute is added to the input field. If your web browser supports HTML5 it will not allow you to submit the form without entering text into the input field. Instead, it will display a message that is generated by the web browser itself:

<label for="name">Name (required): </label>
<input type="text" name="name" id="name" required aria-required="true">

Validating common input

HTML5 also provides input types for other data, including email, url, number, range, date, or time. Most current web browsers support these features and handle input validation. In addition, HTML5 validation helps users inputting data by providing specific controls, such as date pickers and custom on-screen keyboards. HTML5 input types are displayed as simple text input fields in older web browsers that do not support these HTML5 features.

The example below shows these HTML5 input types in action. Depending on your web browser, the “Range” input field will be displayed as a slider control to help users provide input more easily. Similarly the “Number” input field may be displayed with buttons to increase or decrease the number incrementally. Input errors, such as an incorrect email address, will be indicated using the web browser dialogs as in the previous example.

<div>
  <label for="email">Email: </label>
  <input type="email" name="email" id="email">
</div>
<div>
  <label for="url">Website: </label>
  <input type="url" name="url" id="url">
</div>
<div>
  <label for="number">Number: </label>
  <input type="number" name="number" id="number" min="0" max="100" step="10" value="0">
</div>
<div>
  <label for="range">Range: </label>
  <input type="range" name="range" id="range" min="0" max="100" step="10" value="0">
</div>
<div>
  <label for="date">Date: </label>
  <input type="date" name="date" id="date">
</div>
<div>
  <label for="time">Time: </label>
  <input type="time" name="time" id="time">
</div>

Validating patterned input

The HTML5 pattern attribute allows the use of regular expressions to specify custom formats for the input. This is useful for specific types of data patterns such as telephone numbers, postal codes, and serial numbers.

Car license plate numbers

In the example below, the pattern attribute of the input element specifies a particular format that matches car license plate (registration) numbers in Germany. The required pattern consists of one to three letters (for the city where the car is registered), followed by a space, two to four random letters, another space, then one to four random numbers.

<div>
  <input type="text" id="license"
    pattern="[A-ZÖÄÜ]{1,3}( )[A-Z]{2,4}( )[0-9]{1,4}"
  >
</div>

Be forgiving of different input formats

Validation should aim to be as accommodating as possible of different forms of input for particular data types. For example, telephone numbers are written with different separators and digit groupings. Your form will be easier to use of it can interpret multiple notations.

Client-side validation benefits

In general, validating input client-side results in a better user experience and makes resolving validation errors more understandable. It can also reduce network and server load. However, not all web browsers may support HTML5 or any custom validation scripts. This means that validation needs to be carried out server-side as well.

Validation by the user

Where possible, users should be able to check their own input and correct it if necessary. This is particularly important for actions that are permanent or otherwise critical, but also when data cannot be automatically checked. For example, providing users with the option to check the postal address that they provided can be useful before a purchase is completed.

Provide undo functionality

Where possible, provide undo mechanisms for reversible actions. Examples include:

• A Content Management System (CMS) has the ability to delete unwanted comments. Instead of deleting them right away, they are stored in a “trash” folder so that they can be restored.

• A webmail application allows users to “undo” sending an email for a few seconds. This is useful if the user forgot to attach a file or sent the email to the wrong recipient.

• A shopping website lets users cancel purchases up to 24 hours after the order is submitted. The website explains the policy, and includes a summary of the policy on the purchase receipt emailed to the user. After 24 hours, the purchase will be shipped to the user and can no longer be canceled.

Require user confirmation

Where possible, require user confirmation for irreversible actions, such as permanent deletion of data. Examples include:

• A CMS allows users to permanently delete comments from the trash folder. When this action is initiated, a dialog box is displayed to the user to confirm the action.

• A banking application requires users to confirm transfer transactions by selecting a checkbox labeled “I have checked that the amount I wish to transfer is correct”.

• A shopping website displays a summary of the order, shipping address, and billing information that the user must confirm before the purchasing transaction is completed and the order is placed.