UI Toolkit

Form Validation

While input validation should always be performed server-side, it’s very helpful to users to perform basic client-side validation using JavaScript.

We use the small, but still very flexible Validate.js library. Below are working examples of basic validation techniques for commonly-used form field types.

More Information in the WCAG 2.0 Guidelines

SCR18: Providing client-side validation and alert

SCR32: Providing client-side validation and adding error text via the DOM

Use HTML 5 Input Types

When you use the appropriate input type on an input, modern browsers will do basic client-side validation (and older browsers will handle it just fine). Modern browsers will also provide useful controls for users.

Date/Time Validation Requires MAX Validation JavaScript

Valid Date

This will validate on any valid date.

Modern browsers will help users with formatting and often provide a date picker, but it's important to display placeholder text showing the expected format for older browsers.

<form class="form-inline" id="form-date" action="#" novalidate>
  <div class="well">
    <div class="form-group">
      <div class="col-xs-12">
        <label for="valid-date">Enter a valid date.</label>
      </div>
      <div class="col-md-7">
        <input id="valid-date" class="form-control" type="date" name="valid-date" placeholder="mm/dd/yyyy">
        <button type="submit" class="btn btn-primary">Validate</button>
      </div>
      <div class="col-md-5 messages"></div>
    </div>
  </div>
</form>

<script>
  (function() {
    var constraints = {
      'valid-date': {
        presence: {
          message: "You must enter a valid date."
        },
        date: {
          message: "You must enter a valid date."
        }
      }
    };
  })();
</script>

Date within Constraints

This will validate on valid dates between an "earliest" date and a "latest" date specified in the configuration.

Modern browsers will help users with formatting and often provide a date picker, but it's important to display placeholder text showing the expected format for older browsers.

<form class="form-inline" id="form-date-constraints" action="#" novalidate>
  <div class="well">
    <div class="form-group">
      <div class="col-xs-12">
        <label for="valid-date">Enter a valid date between 2001 and 2010.</label>
      </div>
      <div class="col-md-7">
        <input id="valid-date-constraints" class="form-control" type="date" name="valid-date-constraints" placeholder="mm/dd/yyyy">
        <button type="submit" class="btn btn-primary">Validate</button>
      </div>
      <div class="col-md-5 messages"></div>
    </div>
  </div>
</form>

<script>
  (function() {
    var constraints = {
      'valid-date-constraints': {
        presence: {
          message: "You must enter a valid date."
        },
        date: {
          earliest: "2001-01-01",
          latest: "2010-12-31",
          message: "You must enter a valid date between 2001–2010."
        }
      }
    };
  })();
</script>

Valid Date and Time

This will validate on any valid date and time.

Modern browsers will help users with formatting and often provide a date picker, but it's important to display placeholder text showing the expected format for older browsers.

<form class="form-inline" id="form-date-time" action="#" novalidate>
  <div class="well">
    <div class="form-group">
      <div class="col-xs-12">
        <label for="valid-date-time">Enter a valid date and time.</label>
      </div>
      <div class="col-md-7">
        <input id="valid-date-time" class="form-control" type="datetime-local" name="valid-date-time" placeholder="mm/dd/yyyy hh:mm am">
        <button type="submit" class="btn btn-primary">Validate</button>
      </div>
      <div class="col-md-5 messages"></div>
    </div>
  </div>
</form>

<script>
  (function() {
    var constraints = {
      'valid-date-time': {
        presence: {
          message: "You must enter a valid date and time."
        },
        datetime: {
          message: "You must enter a valid date and time."
        }
      }
    };
  })();
</script>

Back to Top

URL Validation Requires MAX Validation JavaScript

This will validate on any valid URL.

It's important to display placeholder text showing the expected format, including a leading http:// or https://.

<form class="form-inline" id="form-url" action="#" novalidate>
  <div class="well">
    <div class="form-group">
      <div class="col-xs-12">
        <label for="valid-url">Enter a valid URL.</label>
      </div>
      <div class="col-md-7">
        <input id="valid-url" class="form-control" type="url" name="valid-url" placeholder="http://max.gov">
        <button type="submit" class="btn btn-primary">Validate</button>
      </div>
      <div class="col-md-5 messages">
      </div>
    </div>
  </div>
</form>

<script>
  (function() {
    var constraints = {
      'valid-url': {
        presence: {
          message: "You must enter a valid URL."
        },
        url: {
          message: "You must enter a valid URL."
        }
      }
    };
  })();
</script>

Back to Top

Email Validation Requires MAX Validation JavaScript

This will validate on any valid email address.

It's important to display placeholder text showing the expected format.

<form class="form-inline" id="form-email" action="#" novalidate>
  <div class="well">
    <div class="form-group">
      <div class="col-xs-12">
        <label for="valid-email">Enter a valid email address.</label>
      </div>
      <div class="col-md-7">
        <input id="valid-email" class="form-control" type="email" name="valid-email" placeholder="abc@xyz.com">
        <button type="submit" class="btn btn-primary">Validate</button>
      </div>
      <div class="col-md-5 messages">
      </div>
    </div>
  </div>
</form>

<script>
  (function() {
    var constraints = {
      'valid-email': {
        presence: {
          message: "You must enter a valid email address."
        },
        email: {
          message: "You must enter a valid email address."
        }
      }
    };
  })();
</script>

Back to Top

Phone Number Validation Requires MAX Validation JavaScript

This will validate on any valid North American telephone number.

It's important to display placeholder text showing the expected format, though the validator is flexible enough to allow for alternate formats such as (202) 555-1212 or 2025551212.

<form class="form-inline" id="form-phone" action="#" novalidate>
  <div class="well">
    <div class="form-group">
      <div class="col-xs-12">
        <label for="valid-phone">Enter a valid phone number.</label>
      </div>
      <div class="col-md-7">
        <input id="valid-phone" class="form-control" type="tel" name="valid-phone" placeholder="202-555-1212">
        <button type="submit" class="btn btn-primary">Validate</button>
      </div>
      <div class="col-md-5 messages">
      </div>
    </div>
  </div>
</form>

<script>
  (function() {
    var constraints = {
      'valid-phone': {
        presence: {
          message: "You must enter a valid phone number."
        },
        format: {
          pattern: /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/,
          message: "You must enter a valid phone number."
        }
      }
    };
  })();
</script>

Back to Top

Zip Code Validation Requires MAX Validation JavaScript

This will validate on any valid United States zip code.

It's important to display placeholder text showing the expected format, though the validator is flexible enough to allow for both 5-digit and full 9-digit zip codes.

<form class="form-inline" id="form-zip" action="#" novalidate>
  <div class="well">
    <div class="form-group">
      <div class="col-xs-12">
        <label for="valid-zip">Enter a valid zip code.</label>
      </div>
      <div class="col-md-7">
        <input id="valid-zip" class="form-control" type="text" name="valid-zip" placeholder="20500-0001">
        <button type="submit" class="btn btn-primary">Validate</button>
      </div>
      <div class="col-md-5 messages">
      </div>
    </div>
  </div>
</form>

<script>
  (function() {
    var constraints = {
      'valid-zip': {
        presence: {
          message: "You must enter a valid zip code."
        },
        format: {
          pattern: /^[0-9]{5}(?:-[0-9]{4})?$/,
          message: "You must enter a valid zip code."
        }
      }
    };
  })();
</script>

Back to Top