HTML Tutorials

Ensuring the user provides a value

The simplest kind of input validation is to ensure that the user provides a value. You do this with the required attribute. The user cannot submit the form until a value has been provided, although no limits are placed on what the value can be. We can see the required attribute in use below.

    <meta name="author" content="Adam Freeman"/>
    <meta name="description" content="A simple example"/>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <form method="post" action="http://titan:8080/form">
      <input type="hidden" name="recordID" value="1234"/>
        <label for="name">
          <input type="text" required id="name" name="name"/>
        <label for="password">
          Password: <input type="password" required placeholder="Min 6 characters" id="password" name="password"/>
        <label for="accept">
          <input type="checkbox" required id="accept" name="accept"/>
          Accept Terms & Conditions
      <input type="submit" value="Submit"/>

Here, we have applied the required attribute to three types of input elements. The user will not be able to submit the form until they have provided values for all three. For the text and password types, this means that the user has to enter text into the text box, and the box has to be checked for the checkbox type.

The HTML5 input validation support is fairly basic, especially if you are used to the richer functionality available through libraries such as jQuery. For example, each problem is highlighted to the user in turn, meaning that if there are multiple problems in a form, the user is forced to undertake a voyage of gradual discovery by repeatedly submitting the form and fixing one problem at a time. There is no summary of all of the validation errors and you have no control over the appearance of the validation error warning.