Validation error messages

Indicates issues with user input(s).

Examples

Usage

Error summary allows users to click through to each error from the top of a page. Typically displayed after the user attempts to submit the form.

Do:

place the error summary at the top of the main page.
link the errors in the error summary to the answer they relate to.
always show an error message next to the field causing the error, not just a summary.

Avoid:

using error summary for real-time validation, instead use error message

References

Nielsen Norman Group
10 Design Guidelines for Reporting Errors in Forms

Please correct the errors and try again.

Required fields are marked with an asterisk

Text box

Text area

Copy


            <turas-validation-summary></turas-validation-summary>
            <turas-required-field-marker></turas-required-field-marker>
            <turas-text-box asp-for="TextBoxBasicRequired" />
            <turas-text-area asp-for="TextAreaBasicRequired" />

Copy


            <div class="validation-summary-valid  " data-valmsg-summary="true" role="alert"><p>Please correct the errors and try again.</p><ul><li style="display:none"></li>
</ul></div>
            <p class="requiredFieldMarkerNotice">Required fields are marked with an asterisk</p>
            <div class="form-group form-text-box "><label class="control-label requiredFieldMarker  " for="TextBoxBasicRequired">Text box</label>
<div class="row">
<div class="col">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" aria-required="true" type="text" data-val="true" data-val-required="The Text box field is required." id="TextBoxBasicRequired" name="TextBoxBasicRequired" value="" />
</div>
<span class="field-validation-valid" data-valmsg-for="TextBoxBasicRequired" data-valmsg-replace="true"></span>
</div>
</div>
            <div class="form-group form-text-area "><label class="control-label requiredFieldMarker  " for="TextAreaBasicRequired">Text area</label>
<div class="row">
<div class="col">
<textarea placeholder="" class="form-control" rows="5" cols="50" data-val-normalizer="trim-whitespace" aria-required="true" data-val="true" data-val-required="The Text area field is required." id="TextAreaBasicRequired" name="TextAreaBasicRequired">
</textarea>
</div>
<span class="field-validation-valid" data-valmsg-for="TextAreaBasicRequired" data-valmsg-replace="true"></span>
</div>
</div>

Testing

Check that the validation error messages:

can be used with a keyboard only, with no keyboard traps
are clearly visible and easy to identify which field the error relates to when navigating through the page
focus remains visible on the form field when validation messages are shown
focus is managed appropriately after validation
are announced and associated with the relevant field for screen reader users
do not cause loss of user-entered information
remain understandable at 400% zoom and on smaller screens
are not communicated through colour alone
dynamic validation messages (for example, character limits or required fields) are announced where appropriate
do not disappear before users have had a chance to understand or correct them

Developer considerations

When using the validation error messages in your form:

associate error messages with the relevant form control using aria-describedby
make sure the error message is included in the accessible description of the field
use clear, specific error text that explains how to resolve the issue
place error messages close to the relevant field visually and in the DOM
use aria-invalid="true" when validation has failed
make sure error states are programmatically available to assistive technologies
do not rely only on visual styling such as colour, icons or borders to communicate errors
make sure dynamic validation messages use appropriate live region behaviour where users need to be informed of changes
make sure error messages are not announced repeatedly or unnecessarily
for inline validation while completing a field, do not automatically move focus
make sure focus remains visible throughout the validation process
make sure focus order remains logical when correcting errors
make sure validation feedback does not interrupt users unnecessarily