Skip to main content
Hennepin County Design System

Validation

Form validation is also known as an error message. It alerts a user to a mistake they made while giving input on a screen. It lets users know if the information they entered has an error, what went wrong, and how to fix it.

Validation should take place on the front and back end.

TextInput Validation state

Error message

TextArea Validation state

Error Message

HTML

    <h3>TextInput Validation state</h3>
    <div class="hc-form-group">
      <label class="hc-field-label" for="hc-textInputEx3">What is your favorite animal?</label>
      <div class="hc-text-error" id="textInputErrorMsg1">Error message</div>
      <input
        class="hc-input hc-input--error"
        id="hc-textInputEx3"
        name="hc-animal"
        type="text"
        aria-describedby="textInputErrorMsg1"
        aria-invalid="true"
        required
      />
    </div>


    <h3>TextArea Validation state</h3>
    
    <div class="hc-form-group">
      <label class="hc-field-label" for="hc-textarea5">Instructions</label>
      <div class="hc-text-error" id="textareaErrorMsg">Error Message</div>
      <textarea
        class="hc-textarea hc-textarea--error"
        id="hc-textarea5"
        name="hc-textarea"
        rows="5"
        cols="50"
        aria-describedby="textareaErrorMsg"
        aria-invalid="true"
        required
      ></textarea>
    </div>
A PrimeNG validation component example.

Import

Label

When to use

  • Use validation on all required fields of a form.
  • Set up validation so it alerts the user if they enter information incorrectly. Include in the error message information about how to fix the error.

When not to use

  • Don’t use validation error messages to tell a user that they are not eligible for a service.
Open all

Use attribute aria-invalid="true" for inputs with an error.

Use aria-describedby to associate error messages with form fields. This will relay the error to screen readers.

Place error messages next to the input fields.

Include these features in form validation:

  • Use inline validation when possible.
  • Scroll the user to the top-most error and give that field focus.
  • Only allow users to input valid characters, like letters when asking for a name.
  • If validation needs database confirmation, show all errors when the user submits the form.
  • Don't display errors until a user has had a chance to complete the input.
  • Remove error messages when the field becomes valid on keypress.
  • Customize the error message to help the user fix the issue. Avoid passing blame to the user in the message.

Open all