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

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 



    

        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

Errors on radio buttons

Example
Check your personal details

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

Please select an option
Code 



    

        Check your personal details
        

            

                

                    

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

                        Please select an option
                        

                            
    
                                
  • 
                                
                                
                                
    
                                
    • 
                                
  • 
                                
                                
                                
    
                                
    •