Stating validation requirements up front, with live feedback, means users won’t be left guessing.
- 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-elementattribute set to a CSS selector that uniquely identifies a
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 the
data-validatorattribute 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 nameand set its value to a regular expression that represents whether the validator's condition is met, e.g.
- Come up with a name for the validator, e.g.
This component has no settings.
This component has no variants.