HTML Tutorial - HTML Form Validation

HTML5 introduces support for input validation. You manage input validation through attributes.

The following list shows which elements and input types support the different validation attributes.

Validation Attribute: required
Elements: textarea, select, input (the text, password, checkbox, radio, file, datetime, datetime-local, date, month, time, week, number, email, url, search, and tel types)
Validation Attribute: min, max
Elements: input (the datetime, datetime-local, date, month, time, week, number, and range types)
Validation Attribute: pattern
Elements: input (the text, password, email, url, search, and tel types)

required input

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.

The following code shows the required attribute in use.

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="name"> Name: 
      <input type="text" required id="name" name="name" />
      </label>
    </p><!--  w ww. j a  v  a2 s.  c o  m-->
    <p>
      <label for="password"> Password: 
      <input type="password" required placeholder="Min 6  characters" id="password"
        name="password" />
      </label>
    </p>
    <p>
      <label for="accept"> 
      <input type="checkbox" required id="accept" name="accept" /> Accept Terms & Conditions
      </label>
    </p>
    <input type="submit" value="Submit" />
  </form>
</body>
</html>

Click to view the demo

bounded input

You use the min and max attributes to ensure that numeric and date values are within a specific range.

You need not apply both attributes.

The min and max values are inclusive, meaning that if you specify a max value of 100, then any value up to and including 100 is allowed.

The following code shows these attributes applied to the number type of the input element.

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="price"> $ per unit in your area: <input
        type="number" min="0" max="100" value="1" id="price" name="price" />
      </label>
    </p><!--from ww  w  .j  a  v a2s . c om-->
    <input type="submit" value="Submit" />
  </form>
</body>
</html>

Click to view the demo

match pattern

The pattern attribute ensures that a value matches a regular expression.

The following code shows the pattern attribute in use.

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="name"> Name: <input type="text" id="name"
        name="name" pattern="^.* .*$" />
      </label>
    </p><!--from  w  w  w .j  ava 2  s .  c o  m-->
  </form>
</body>
</html>

Click to view the demo

The pattern ensures that the user enters two names, separated by a space.

email or url

The email and url types of the input element ensure that the user has entered a valid e-mail address or fully qualified URL, respectively.

We can combine the pattern attribute with these types to restrict the values, for example, limiting e-mail address to a particular domain.

The following code uses the pattern Attribute with the email input Element Type.

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="email"> Email: <input type="email"
        placeholder="user@mydomain.com" required pattern=".*@mydomain.com$"
        id="email" name="email" />
      </label>
    </p><!--from  w  ww  .j av  a2s  .co m-->
    <input type="submit" value="Submit" />
  </form>
</body>
</html>

Click to view the demo

The code above used three of the validation features.

The email type of the input element ensures that use enters a valid e-mail address.
The required attribute ensures that the user provides a value.
The pattern attribute ensures that an e-mail address belongs to a specific domain (mydomain.com).

disable validation

You can disable the form validation either by applying the novalidate attribute to the form element, or the formnovalidate attribute to the types of the button and input elements that can submit forms.

The following code shows how you can disable form validation.

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="email"> Email: <input type="email"
        placeholder="user@mydomain.com" required pattern=".*@mydomain.com$"
        id="email" name="email" />
      </label>
    </p><!--from w  w w  .  j  av  a2s .c om-->
    <input type="submit" value="Submit" /> <input type="submit"
      value="Save" formnovalidate />
  </form>
</body>
</html>

Click to view the demo