University of St Andrews

Form errors

This pattern is the style for showing form validation errors.

Rules for form errors

• The error summary must be at the top of the page.
• 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
• Errors on radio buttons

Errors on input fields

<div class="alert alert-danger" role="alert" aria-labelledby="summary-heading-example-2" tabindex="-1">
    <h3 id="summary-heading-example-1">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>
<div class="dpl-form">
    <fieldset>
        <legend>Your personal details</legend>
        <div class="row">
            <div class="col-xs-12">
                <form>
                    <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>
                        <label class="text-danger" id="error-message-full-name"><strong>Please enter your full name</strong></label>
                        <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>
                        <label class="text-danger" id="error-message-telephone-number"><strong>Please enter a valid telephone number using only digits</strong></label>
                        <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">
                </form>
            </div>
        </div>
    </fieldset>
</div>

Errors on radio buttons

<div class="alert alert-danger" role="alert" aria-labelledby="summary-heading-example-2" tabindex="-1">
    <h3 id="summary-heading-example-2">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>
<div class="dpl-form">
    <fieldset>
        <legend>Check your personal details</legend>
        <div class="row">
            <div class="col-xs-12">
                <form>
                    <div class="form-group dpl-form">
                        <p id="example-personal-details">Are your personal details 
                        correct and up-to-date?</p>
                        <label class="text-danger"><strong>Please select an option</strong></label>
                        <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>
                    </div>
                    <input class="btn btn-primary" type="submit" value="Continue">
                </form>
            </div>
        </div>
    </fieldset>
</div>