Form validation

The DPL is platform agnostic so we don't provide code for performing validation but have documented the following design principles.

Show an error summary at the top of the page so it is visible when the page is refreshed and is immediately read out by assistive technology. Write a message that helps the user to understand why the error occurred and what to do about it.
Include a heading in the error summary to alert the user to the error.
In the error summary, link to each of the problematic questions.
An error message must appear above the input field for each invalid answer.

Validation of input fields

Example

Message to alert the user goes here

Optional description of errors and how to correct them.

Descriptive link to the question with an error
Descriptive link to the question with an error

Your personal details

Full name As shown on your birth certificate or passport Error message about full name goes here

Telephone number Error message about telephone number goes here

Code

<div class="alert alert-danger" role="alert" aria-labelledby="error-summary-heading-example" tabindex="-1">
    <h3 id="summary-heading-example">Message to alert the user goes here</h3>
    <p>Optional description of errors and how to correct them.</p>
    <ul>
        <li><a href="#example-full-name">Descriptive link to the question with an error</a></li>
        <li><a href="#example-telephone-number">Descriptive link to the question with an error</a></li>
    </ul>
</div>

<fieldset><legend>Your personal details</legend>

    <div class="form-group has-error">
        <label for="example-full-name" id="error-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>Error message about full name goes here</strong></label>
        <input class="form-control " id="example-full-name" type="text" name="fullName" value="" aria-describedby="error-message-full-name">
    </div>

    <div class="form-group has-error">
        <label for="example-telephone-number" id="error-telephone-number">Telephone number</label>
        <label class="text-danger" id="error-message-telephone-number"><strong>Error message about telephone number goes here</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">
</fieldset>

Validation of radio buttons

Example

Message to alert the user goes here

Optional description of errors and how to correct them.

Descriptive link to the question with the error

Check your personal details

Code

<div class="alert alert-danger" role="alert" aria-labelledby="error-summary-heading-example-2" tabindex="-1">
    <h3 id="summary-heading-example-2">Message to alert the user goes here</h3>
    <p>Optional description of errors and how to correct them.</p>
    <ul>
        <li><a href="#example-personal-details">Descriptive link to the question with the error</a></li>
    </ul>
</div>

<fieldset><legend>Check your personal details</legend>
    <form>
        <div class="form-group">
            <p id="example-personal-details">Are your personal details correct and up-to-date?</p>
            <label class="text-danger"><strong>Error message about personal details goes here</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>
</fieldset>