HTML Tutorials

What is validation?

When you solicit input from users, you run the risk of receiving data that you can’t use. This can be because the user has made a mistake, or you have failed to clearly communicate the kind of response you were looking for. HTML5 introduces support for input validation, which is where you provide the browser with some basic information about the kind of data you require. The browser uses this information to check that the user has entered usable data before the form is submitted. If the data is problematic, the user is prompted to correct the problem and can’t submit the form until the issue is resolved. Performing validation in the browser is not a new idea, but prior to HTML5 you had to use a JavaScript library, such as the excellent jQuery validation plugin. Having built-in validation support with HTML5 is certainly convenient but, as you shall see, the support is rudimentary and inconsistent across browsers.

The benefit of input validation in the browser is that the user gets immediate feedback about problems. Without this feature, the user has to submit the form, wait for the server to respond, and then deal with any problems that are reported. On a low-performing network and an over-utilized server, this can be a slow and frustrating process. You manage input validation through attributes. The below table shows which elements (and input types) support the different validation attributes.