3.10 Validate form errors and account for tooling requirements
Label forms correctly while also checking for errors both prior to and during submission to reduce the impact of erroneous data entry.
Criteria
- Error validation:
Identify errors through live validation and with feedback on submission.- 48 Cart Abandonment Rate Statistics 2023
- Client-side form validation
- Data Validation
- Designing for forgiveness
- Error handling – UX design patterns
- HTML attribute: pattern
- Inline Field Validation vs. Constantly Active Submit Button
- Validating Input
- WCAG 2.2 Understanding Docs: Error Identification
- Web Form Validation: Best Practices and Tutorials
- Label elements:
Clearly label and identify required elements to ensure easy recognition for users using assistive technologies. - Allow clipboard:
Always allow the copying and pasting of content (including passwords) from external sources.
Benefits
- Economic
Fixing issues immediately and keeping people in the process can help to prevent abandonment. - Performance
Enabling users to fill in forms more efficiently and avoid navigating back to where they were or refilling data on forms can increase the speed of necessary form filing and reduce errors in completion. - Security
Allowing people to correct input errors, verify their input prior to submission, and identifying errors early in the process can help to prevent costly data protection mistakes.
GRI
- Materials: Medium
- Energy: Medium
- Water: Medium
- Emissions: Medium