Validation
Stating validation requirements up front, with live feedback, means users won’t be left guessing.
<form class="usa-form">
<fieldset class="usa-fieldset">
<legend class="usa-legend">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">
<li class="usa-checklist__item usa-checklist__item--checked" 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" type="text"
aria-describedby="validate-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>
Implementation
- 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:
-
Come up with a name for the validator, e.g.
uppercase
. It shouldn't have any spaces in it. -
On one of the list elements in the
.usa-checklist
, set thedata-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. -
On the input field, add a field called
data-validate-validator name
and set its value to a regular expression that represents whether the validator's condition is met, e.g.data-validate-uppercase="[A-Z]"
.
-
Come up with a name for the validator, e.g.
Validation settings
This component has no settings.
Validation variants
This component has no variants.
Package information
-
Package usage:
@import validation
-
Requires:
required
,global