Skip to contentSkip to footer
Give feedbackv3.0.2

Validation

Form validation is an important part of guiding a users journey through entry fields. Most field types have an error style, making it clear to the user which fields are incorrect and why.

Form pages should include an error box at the top of the form with anchor links to the incorrect form fields. Each field should then have its own error text beneath it that explains the problem.

When a user corrects the field it should remove the red outline. This can be seen by correcting the Email input below. The CSS only supports Javascript validation. To show validation with a class (rather than HTML5), toggle the .invalid class on the form element.

Please correct the errors

Your form couldn't be completed due to errors. Please correct the following fields.

Date
Please enter a date.
Please enter a valid email format including the @ symbol.
Please enter a phone number.
Radio buttons
Please select one.
Checkboxes
Please select at least one.
<div class="example-box-plain">
    <div class="well--outline invalid">
        <h3>Please correct the errors</h3>
        <p>Your form couldn't be completed due to errors. Please correct the following fields.</p>
        <ul>
            <li><a class="invalid" href="#date-fieldset">Date</a></li>
            <li><a class="invalid" href="#email-fieldset">Email</a></li>
            <li><a class="invalid" href="#phone-fieldset">Phone number</a></li>
            <li><a class="invalid" href="#radio-fieldset">Radio buttons</a></li>
            <li><a class="invalid" href="#checkbox-fieldset">Checkboxes</a></li>
            <li><a class="invalid" href="#dropdown-fieldset">Dropdown</a></li>
        </ul>
    </div>
    <fieldset>
        <label for="name">Name<span class="optional"> (optional)</span></label>
        <input id="name" placeholder="" type="text">
    </fieldset>
    <div class="form-group-date" id="date-fieldset">
        <legend>Date</legend>
        <fieldset>
            <label for="dob-day"><span class="screenreader">Date,</span>Day</label>
            <input class="invalid" id="dob-day" placeholder="DD" maxlength="2" min="1" max="31"  name="day" type="number" pattern="\d{1,2}" autoComplete="off">
        </fieldset>
        <fieldset>
            <label for="dob-month">Month</label>
            <input class="invalid" id="dob-month" placeholder="MM" maxlength="2" min="1" max="12" name="month" type="number" pattern="\d{1,2}" autoComplete="off">
        </fieldset>
        <fieldset>
            <label for="dob-year">Year</label>
            <input class="invalid" id="dob-year" placeholder="YYYY" maxlength="4"  min="1900" max="2100" name="year" type="number" pattern="\d{4}" autoComplete="off">
        </fieldset>
        <div class="invalid">
            Please enter a date.
        </div>
    </div>
    <fieldset id="email-fieldset">
        <label for="email">Email</label>
        <input id="email" placeholder="" type="email" value="email!domain.com" required>
        <div class="invalid">
            Please enter a valid email format including the @ symbol.
        </div>
    </fieldset>
    <fieldset id="phone-fieldset">
        <label for="phone">Phone number</label>
        <input class="invalid" id="phone" placeholder="" type="tel">
        <div class="invalid">
            Please enter a phone number.
        </div>
    </fieldset>
    <fieldset id="radio-fieldset">
        <legend for="radio-inline">Radio buttons</legend>
        <label class="radio radio--inline">
            <input class="invalid" name="radio-inline" type="radio" value="option1">Yes
        </label>
        <label class="radio radio--inline">
            <input class="invalid" name="radio-inline" type="radio" value="option2">No
        </label>
        <div class="invalid">
            Please select one.
        </div>
    </fieldset>
    <fieldset id="checkbox-fieldset">
        <legend for="checkbox">Checkboxes</legend>
        <label class="checkbox checkbox--block">
            <input class="invalid" name="checkbox" type="checkbox">Option one
        </label>
        <label class="checkbox checkbox--block">
            <input class="invalid" name="checkbox" type="checkbox">Option two
        </label>
        <div class="invalid">
            Please select at least one.
        </div>
    </fieldset>
    <fieldset id="dropdown-fieldset">
        <label for="exampleSelect1">Dropdown</label>
        <div class="dropdown">
            <select class="invalid" id="exampleSelect1">
                <option>None</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
        <div class="invalid">
            Please select one.
        </div>
    </fieldset>
</div>