Stating validation requirements up front, with live feedback, means users won’t be left guessing.

Enter a code

Code requirements

  • Use at least one uppercase character
  • Use at least one number
<form class="usa-form">
  <fieldset class="usa-fieldset">
    <legend class="usa-legend usa-legend--large">Enter a code</legend>
    <div class="usa-alert usa-alert--info usa-alert--validation">
      <div class="usa-alert__body">
        <h3 class="usa-alert__heading">Code requirements</h3>
        <ul class="usa-checklist" id="validate-code">
            class="usa-checklist__item usa-checklist__item--checked"
            Use at least one uppercase character
          <li class="usa-checklist__item" data-validator="numerical">
            Use at least one number
    <label class="usa-label" for="code">Code</label>
    <input class="usa-button" type="submit" value="Submit code" />


Using the validation component

  • The validation component is intended primarily for usability, not as a robust security solution, since all the validation logic occurs on the client-side. The validation should be “mirrored” on the server-side for security purposes.
  • Input fields which have custom validation logic can automatically provide helpful feedback to users if they are assigned a data-validation-element attribute set to a CSS selector that uniquely identifies a .usa-checklist, e.g. data-validation-element="#validate-code".
  • For each kind of validation you’d like to provide feedback on:
    1. Come up with a name for the validator, e.g. uppercase. It shouldn’t have any spaces in it.
    2. On one of the list elements in the .usa-checklist, set the data-validator attribute to the name of the validator, e.g. data-validator="uppercase". This is the list item that will appear “checked” when the validator’s condition is met.
    3. On the input field, add a field called data-validate-validator name and set its value to a regular expression (described on RegexOne) that represents whether the validator’s condition is met, e.g. data-validate-uppercase="[A-Z]".

Validation settings

This component has no settings.

Validation variants

This component has no variants.


  • Package usage: @forward "usa-validation";
  • Dependencies: usa-form, usa-fieldset, usa-legend, usa-alert, usa-checklist, usa-label, usa-input, usa-button