3.11 Validate Form Errors and External Input

Entering information on a page can lead to problems. If a visitor makes a mistake along the way, it makes good sense to have systems in place to guide them through resolving the typos, confusion, and glitches that can occur which lead to abandonment and extra emissions through wasted device usage.

Criteria

Error Validation: Errors are identified through live validation as well as upon submission.
Label Elements: Required elements are clearly identified and labeled (for the benefit of voice tools such as screen readers and virtual assistants), and optional elements (if unnecessary) removed.
Allow Paste: Always allow the pasting of content (including passwords) from external sources.

Impact

Medium

Effort

Low

Benefits

Security:
Allowing people to correct mistakes (and identifying errors early in the input process) on forms before submission can avoid costly mistakes during financial transactions and spend less time being wasted on tasks.
Performance:
Being able to fill in a form while addressing issues quickly reduces the barrier to entry and thereby avoids potentially having to refill a form or waste time going back and scrolling.
Economic:
Shopping cart abandonment happens when errors occur, fixing issues upfront can reduce such potential issues.

GRI

materials: Medium
energy: Medium
water: Medium
emissions: Medium

Example

Code:

<label for="username">Username: (3-16 characters)</label>
<input name="username" type="text" value="Sasha" pattern="w{3,16}" required>
<label for="pin">PIN: (4 digits)</label>
<input name="pin" type="password" pattern="d{4,4}" required>

HTML attribute: pattern.

Resources

View the Guideline