Form validation

Digital pattern library

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


    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

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


    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
    
        
            Are your personal details correct and up-to-date?
            Error message about personal details goes here
            
                
                    
                    
                    Yes, my personal details are correct
                    
                    

                    
                        
                        No, some details are wrong or have changed