1. Validation or Error handling and error messages
Error messages that just say "there is an error on your form", but, do not give any guidance as to what is wrong. For example, an error message like "date is incorrect" or "phone number is incorrect" do not provide guidance.
- "The sole purpose of form validation is to help the user" - Form.Guide
- Use Patterns to check validity
- Alert the user of any validation errors in an apparent and accessible manner.
- Page Title (mention form errors)
- Heading (mention form errors)
- Don't use COLOR alone to indicate error.
- Place error messages in close proximity to form control. (Inside <label> is a good place)
- Provide informative feedback messages (what's wrong, how to fix it).
- Allow the user to easily access the form elements that need to be modified.
- link to elements in error
- show only elements in error
- Allow resubmission and revalidation of the form information. (Thanks to WebAIM)
- Avoid Default Field Validation - use "novalidate or formnovalidate" attributes
<form class="example" action="mailto:email@example.com">
<label for="name">* Name: <br />
Error: Please enter your name.</div>
<input name="name" type="text" id="name" required="required" aria-required="true" maxlength="55" style="width:200px" /></label>
2. Form Instructions and Intervening Text