Form errors

This pattern is the style for showing form validation errors.

Rules for form errors

  • The error summary must help the user understand why the error occurred and what to do about it.
  • The error summary must include a heading to alert the user of the specific error.
  • The error summary must link to each of the problematic form answers.
  • Additional error text must appear above the input field for each invalid form answer.

Options available

Errors on input fields

Example

Your personal details
As shown on your birth certificate or passport Please enter your full name
Please enter a valid telephone number using only digits
Code 
<div class="alert alert-danger" role="alert" aria-labelledby="summary-heading-example-2" tabindex="-1">
    <h3 id="summary-heading-example-1" class="alert__heading">Incomplete personal details</h3>
    <p>Optional description of errors and how to correct them.</p>
    <ul>
        <li><a href="#example-full-name">Please enter your full name</a></li>
        <li><a href="#example-telephone-number">Please enter a valid telephone number</a></li>
    </ul>
</div>
<form class="dpl-form">
    <fieldset>
        <legend><h3>Your personal details</h3></legend>
        <div class="row">
            <div class="col-xs-12">
                <div class="form-group has-error dpl-form">
                    <label for="example-full-name" id="example-full-name">Full name</label>
                    <span class="help-block">As shown on your birth certificate or passport</span>
                    <span class="text-danger" id="error-message-full-name"><strong>Please enter your full name</strong></span>
                    <input class="form-control has-error" id="example-full-name" type="text" name="fullName" value="" aria-describedby="error-message-full-name">
                </div>
                <div class="form-group has-error dpl-form">
                    <label for="example-telephone-number" id="example-telephone-number">Telephone number</label>
                    <span class="text-danger" id="error-message-telephone-number"><strong>Please enter a valid telephone number using only digits</strong></span>
                    <input class="form-control has-error" id="example-telephone-number" type="text" name="telephone" value="" aria-describedby="error-message-telephone-number">
                </div>
                <input class="btn btn-primary" type="submit" value="Continue">
            </div>
        </div>
    </fieldset>
</form>

Errors on radio buttons

Example

Example form
Check your personal details

Are your personal details correct and up-to-date?

Please select an option
Code 
<div class="alert alert-danger" role="alert" aria-labelledby="summary-heading-example-2" tabindex="-1">
    <h3 id="summary-heading-example-2" class="alert__heading">Incomplete personal details</h3>
    <p>Optional description of errors and how to correct them.</p>
    <ul>
        <li><a href="#example-personal-details">Please confirm your personal details are correct and up-to-date.</a></li>
    </ul>
</div>
<form class="dpl-form">
    <fieldset>
        <legend><h3>Example form</h3></legend>
        <div class="row">
            <div class="col-xs-12">
                <div class="form-group has-error dpl-form">
                    <fieldset class="radio-button" aria-describedby="example-personal-details">
                        <legend><span class="font-weight--bold">Check your personal details</span></legend>
                        <p class="help-block" id="example-personal-details">Are your personal details 
                        correct and up-to-date?</p>
                        <span class="text-danger"><strong>Please select an option</strong></span>
                        <div class="radio-button">
                            <ul>
                                <li>
                                <input type="radio" id="stacked-option1" name="stacked-selector">
                                <label for="stacked-option1">Yes, my personal details are correct</label>
                                <div class="check"></div>
                                </li>
                                <li>
                                <input type="radio" id="stacked-option2" name="stacked-selector">
                                <label for="stacked-option2">No, some details are wrong or have changed</label>
                                <div class="check"></div>
                                </li>
                            </ul>
                        </div>
                    </fieldset>
                </div>
                <input class="btn btn-primary" type="submit" value="Continue">
            </div>
        </div>
    </fieldset>
</form>