Validating input

Overview – Validating input

To help users avoid mistakes, HTML5 defines a range of built-in functionality for validating common types of input, such as email addresses and dates. Some scripting may be necessary for validation when using custom controls or supporting legacy browsers. In these situations, the user notifications should be accessible, as described in the section User notifications.

To ensure security, data needs to be validated both on the client-side and on the server-side as well.

Most user data can be validated using validation attributes on HTML5 form controls. The following are common validation attributes:

required attribute

Specifies whether a form field needs to be filled in before the form can be submitted. See Validating required input.

type attribute

Specifies the type of data. See Validating common input types.

pattern attribute

Specifies a regular expression that defines a pattern the entered data needs to follow. See Validating pattern input.

minlength and maxlength attributes

Specifies the minimum and maximum length of textual data. See Validating length of entries.

min and max attributes

Specifies the minimum and maximum values of numerical input types. See Validating length of entries.

If the rules specified by the validation attributes are not followed, then the element becomes invalid and the browser blocks the form and displays an error message.

Validating required input

Identify required form fields both visually in the label and semantically:

• To identify required fields visually in the label, add an asterisk (*) to the label and define the asterisk above the form; or, add the word "required" in parentheses.
• To identify required fields semantically, add the required attribute to the control.

The required attribute triggers client-side validation in the browser. Current web browsers support the attribute and notify the user of missing required input using a standard web browser dialog. These dialogs respect user settings and preferences in the browser and operating system, such as default font-size, colors, and language.

The presence of the required attribute enables use of the :required pseudoclass for CSS styling. If the required <input> has no value, it enables use of the :invalid pseudoclass. See the following Good example.

<form method="post" action="script-here">
   <label for="org">Organization (required)</label> 
   <input type="text" id="org" required> 
   <input type="submit" value="Submit">
</form>

input:invalid { border: 2px dashed red; }
input:required { background-color: pink; }

Validating common input types

HTML5 introduces new <input> types for data, including email, url, number, tel (telephone), date and range, amongst others. Modern web browsers provide built-in client-side error validation for these new input types. For instance, a malformed URL triggers the browser to display a dialog with the message “Please enter a URL.”

To help users input data more easily, HTML5 provides controls for some of the new input types, such as a date picker and spin buttons for incrementing or decrementing numbers. For instance, in the example below, modern browsers display the “Number” input field with buttons to increase or decrease the number and display the “Range” input field as a slider control.

Legacy web browsers that don’t support the new input types display a simple text field.

<form class="form-horizontal" role="form" method="get" action="#">
   <div class="form-group">
      <label for="email" class="col-sm-2 control-label">Email</label>
      <div class="col-sm-10">
         <input type="email" name="email" class="form-control" id="email">
      </div>
   </div>
   <div class="form-group">
      <label for="url" class="col-sm-2 control-label">URL</label>
      <div class="col-sm-10">
         <input type="url" name="url" class="form-control" id="url">
      </div>
   </div>
   <div class="form-group">
      <label for="number" class="col-sm-2 control-label">Number</label>
      <div class="col-sm-10">
         <input type="number" name="number" class="form-control" id="number" min="0" max="100" step="10" value="0">
      </div>
   </div>
   <div class="form-group">
      <label for="range" class="col-sm-2 control-label">Range</label>
      <div class="col-sm-10">
         <input type="range" name="range" class="form-control" id="range" min="0" max="100" step="10" value="0">
      </div>
   </div>
   <div class="form-group">
      <label for="date" class="col-sm-2 control-label">Date</label>
      <div class="col-sm-10">
         <input type="date" name="date" class="form-control" id="date">
      </div>
   </div>
   <div class="form-group">
      <label for="time" class="col-sm-2 control-label">Time</label>
      <div class="col-sm-10">
         <input type="time" name="time" class="form-control" id="time">
      </div>
   </div>
   <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
         <button type="submit" class="btn btn-default">Continue</button>
      </div>
   </div>
</form>

Validating patterned input

The pattern attribute provides another useful validation feature. It takes a regular expression (regex) as its value, which is used to match character combinations in text input. Regex is ideal for form validation, matching specific types of data patterns such as telephone numbers, postal codes, and serial numbers.

In this example, the pattern attribute of the <input> element uses regex to define a particular format that matches characters on an Ontario car license plate (issued since 1997). The pattern consists of four letters, followed by a space, followed by three numbers. The pattern won’t capture custom license plate values.

<div>
   <label for="license">Ontario License Plate (XXXX 999)</label>
   <input type="text" id="license" class="form-control" pattern="^[A-Z]{4}( )[0-9]{3}$"> 
</div>

Validating the length of entries

The character length of all text fields created by <input> or <textarea> can be constrained using the minlength and maxlength attributes. A field is invalid if the value has fewer characters than minlength or more characters than maxlength.

For number fields, the min and max attributes can be used to provide a range of valid values.

<form class="form-horizontal" role="form" method="get" action="#">
   <div class="form-group">
      <label for="choose" class="col-sm-2 control-label">Carrot or Orange? </label>
      <div class="col-sm-10">
         <input type="text" name="choose" class="form-control" id="choose" minlength="6" maxlength="6">
      </div>
   </div>
   <div class="form-group">
      <label for="range1" class="col-sm-2 control-label">How many? </label>
      <div class="col-sm-10">
         <input type="number" class="form-control" name="range1" id="range1" min="1" max="10">
      </div>
   </div> 
   <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
         <button type="submit" class="btn btn-default">Submit</button>
      </div>
   </div>
</form>

Accommodating different input formats

When designing validation for the different data types, be as accommodating as possible of different input formats. Keep internationalization and customization in mind. Be permissive about the input format. For example, postal codes and telephone numbers in different countries follow different patterns. License plates can be personalized. Your form will be easier to use if it can interpret multiple notations.

Client-side validation benefits

Client-side validation improves the user experience. By catching invalid data on the client-side, the user can fix it right away, rather than waiting for a round trip to the server and back for error notification. The immediacy makes validation errors more understandable. Client-side validation can also reduce network and server load. However, client-side validation is easy to bypass, so malicious users can easily send bad data through to your server. For that reason, you should always validate on the server-side as well.

Validation by the user

Enabling your users to check and correct their input also reduces errors. Offer this feature whenever possible, but especially when actions are permanent, legal, financial or otherwise critical, or when the user’s data can’t be automatically checked.

Require user confirmation

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

For example:

• A webmail application with an irreversible submit action for sending dozens of emails prompts the user for confirmation. The confirmation is implemented as a Modal window (see Module 12), which requires the user acknowledge it before continuing.
• Before an online shopping order is placed, the user reviews and confirms a summary of the products ordered and the shipping and billing addresses.

Provide undo functionality

Where possible, ensure submissions are reversible.

There are several UI controls that typically allow people to go back to the previous state of the system. For example:

• An Undo option will allow users to revert changes to a UI element.
• A “trash” folder that restores deleted files.
• Using a Back link returns users to a previous page or screen.
• A Cancel button will allow the user to quit a task or multi-step process.
• A Close button will allow users to close a new or an existing view.

Related WCAG resources