Validation

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

Deprecation Notice: USWDS is slating this component for removal from future versions due to usability and accessibility issues. It won't be supported after USWDS v3.12.0.

Default

Component Preview

Component Code


<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">
        <h4 class="usa-alert__heading">Code requirements</h4>
        <ul class="usa-checklist" id="validate-code">
          <li class="usa-checklist__item" data-validator="uppercase">
            Use at least one uppercase character
          </li>
          <li class="usa-checklist__item" data-validator="numerical">
            Use at least one number
          </li>
        </ul>
      </div>
    </div>
    <label class="usa-label" for="code">Code</label>
    <input
      class="usa-input"
      id="code"
      name="code"
      data-validate-uppercase="[A-Z]"
      data-validate-numerical="\d"
      data-validation-element="validate-code"
    />
    <input class="usa-button" type="submit" value="Submit code" />
  </fieldset>
</form>

Guidance

When to use the validation component

Provide helpful validation feedback.: Use the validation component to give immediate feedback on which validation requirements have been successfully met, and which are not completed yet.

Using the validation component

Validate on the server side as well.: 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.
Connect the input element to your validation checklist.: Set the value of your input's data-validation-element to the id of its related .usa-checklist.
Customize the validation attributes.: For each type of validation, create a custom validator name (e.g., uppercase). On the checklist item, set data-validator to your validator name. On the input, add data-validate-[validator name] with a regular expression that tests the condition.

Known issues

Screen reader and screen magnification users did not notice when the validation status changed.: This is a significant accessibility concern that led to the deprecation of this component.
Some users are confused about the purpose of the validation component.: The component does not match user expectations of how their information should be validated in a form input.

USWDS Documentation

For more guidance, view the USWDS Validation Component Documentation.

Settings

This component has no settings.

Variants

This component has no variants.