Where possible, require user confirmation for irreversible actions, such as permanent deletion of data. For example, providing users with the option to check the postal address that they provided can be useful before a purchase is completed. This is particularly important for actions that are permanent or otherwise critical, but also when data cannot be automatically checked. Where possible, users should be able to check their input and correct it if necessary. This means that validation needs to be carried out server-side as well. Client-side validation can also be easily bypassed, or the data is changed before reaching the server. However, not all web browsers support HTML5, or they may not support your custom validation scripts. It can also reduce network and server load. In general, client-side validation results in a better user experience and makes resolving validation errors more understandable. For example, postal codes aren't confined to just numbers in some countries, so using an input of the type number can easily become a problem for many of your website users. Also, it is helpful to be liberal with input. Your form will be easier to use if it can interpret multiple notations. For example, telephone numbers are written with different separators and digit groupings. Validation should aim to be as accommodating as possible of different forms of input for particular data types. Input errors, such as an incorrect email address, will be indicated using the web browser dialogs as in the previous example. Similarly, the “Number” input field may be displayed with buttons to increase or decrease the number incrementally. Depending on your web browser, the “Range” input field will be displayed as a slider control to help users provide input more easily. The example below shows these HTML5 input types in action. HTML5 input types are displayed as simple text input fields in older web browsers that do not support these HTML5 features. Also, HTML5 validation helps users inputting data by providing specific controls, such as date pickers and custom on-screen keyboards. Most current web browsers support these features and handle input validation. HTML5 also provides input types for other data, including email, url, number, range, date, or time. In this example, it is provided redundantly to support web browsers that don’t communicate the required attribute to assistive technology. Most current web browsers automatically set its value to true when the HTML5 required attribute is present. Note: The aria-required attribute informs assistive technologies about required controls so that they are appropriately announced to the users (as opposed to validating the input). Note that the label also displays “(required)”, to inform users that don’t use assistive technology or use older web browsers that do not support the HTML5 required attribute. Instead, it will display a message that is generated by the web browser itself. If your web browser supports HTML5, it will not allow you to submit the form without entering text into the input field. In the example below, the required attribute is added to the input field.
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. Most current web browsers support this attribute and will communicate missing required input to the user, using standard web browser dialog mechanisms. Also, the required attribute can be added to form controls, to programmatically indicate that they are required. Validating required inputįorms frequently include required input that needs to be clearly identified using labels. Client-side validation alone does not ensure security therefore data needs to be validated on the server-side as well. In some situations, such as validating custom controls or supporting legacy browsers, additional scripting may be necessary to validate user input.Ĭustom validation needs to notify users in an accessible way as described in the User Notifications part of this tutorial. HTML5 defines a range of built-in functionality to validate common types of input, such as email addresses and dates. In addition to providing instructions, validate user input to help users avoid mistakes.