HTML 5 Client-side Validations

HTML 5 client-side validations are a very useful feature: they allow rudimentary validation of user data without submitting anything to the server. They are supported to a high degree by modern browsers and screen readers. Still, you should obviously never think of them as a complete replacement for server-side data validation.

HTML 5 client-side validations have a lot of benefits, for example:

• They make resolving validation errors faster and more understandable, thus resulting in a better user experience.
• As such, they can also reduce network and server load.

Validations can be added in two ways:

1. Implicitly by setting the type of an input to a value that comes with some validations by itself, for example type="email".
2. Explicitly by adding validations manually through the respective attributes, for example required or pattern.

The following example demonstrates a few of those validations:

• All inputs are required (using required attribute).
• The “Email” input checks for a valid input format (using type="email" attribute).
• The “Password” input checks for a custom pattern (using pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" attribute).
  • This requires an input of at least six characters with at least one number, one lowercase, and one uppercase letter.
  • To make the pattern available to the user in a human-readable form, you can use the title attribute like this:  title="Minimum 6 characters containing lowercase, uppercase, and

Working Example

Explanation

All browsers handle these validations to their liking. In general, they work quite similarly: when the user submits the form, the browser sets the focus automatically to the first invalid input. The validation error is then announced by the screen reader.

A few notes though:

• Some screen readers announce missing required values automatically as “invalid”, while others do not.
• Some screen readers announce both an input’s name and validation error, while others only announce the validation error.
  • The latter case is a minor inconvenience, as the user may have to find out the input’s name manually (which is easy, but still an annoyance).

Code

<form>
  <div class="control">
    <label for="name">Full name</label><input id="name" required="" type="text" />
  </div>
  <div class="control">
    <label for="email">Email</label><input id="email" required="" type="email" />
  </div>
  <div class="control">
    <label for="password">Password</label><input id="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" required="" title="Minimum 6 characters containing lowercase, uppercase, and at least one number" type="password" />
  </div>
  <fieldset>
    <legend>Gender</legend>
    <div class="control">
      <input id="gender_male" name="gender" required="" type="radio" value="male" /><label for="gender_male">Male</label>
    </div>
    <div class="control">
      <input id="gender_female" name="gender" type="radio" value="female" /><label for="gender_female">Female</label>
    </div>
  </fieldset>
  <div class="control">
    <input id="accept_agbs" required="" type="checkbox" /><label for="accept_agbs">I accept the terms and conditions</label>
  </div>
  <div class="control">
    <input type="submit" value="Register" />
  </div>
</form>

NIL