WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Form validation - on submit or on each required field

for

From: Paul J. Adam
Date: Jun 26, 2014 9:20AM

Here's a few accessible form validation demos I've created ordered from newest to oldest:

Errors Present In Form - Accessible Mobile Forms & Error Validation with HTML5, WAI-ARIA, & jQuery +(mobile)
Simple Form Validation Using Only WAI-ARIA aria-describedby & jQuery .focus()
Signup Form (Accessible Client-side Form Validation with HTML5, WAI-ARIA, & jQuery Validation Plugin Demo (After Tweaks))

I prefer client side validation, stop the problem before you allow a submit. I don't like to refresh the page on a bad submit, instead it's best to send the focus directly to the first error message or invalid input. I don't really like the list of error messages at the top that link to each invalid input. I prefer inline validation where every time the user hits Enter their focus keeps going to the topmost invalid input and each individual error message is visible inline and programmatically associated with the invalid input so they'll hear it on focus and hear it as they TAB through the rest of the form.

My first example is the most recent and I also change the page title dynamically on a bad submit. That's something I rarely see.

Good luck!

Paul J. Adam
Accessibility Evangelist
www.deque.com

On Jun 26, 2014, at 9:05 AM, Liko, Todd < <EMAIL REMOVED> > wrote:

> Hello all.
>
> I am seeking your thoughts on which type of form validation is preferred. A form with required fields (with proper notifications) can be validated server side when submitting the form or each field can be validated while completing the form.
>
> With validation on submit, if there are errors, the form is refreshed with the focus returning to the top of the form where the errors are listed. When validating each field while completing the form, the user is notified of the error right away and focus is returned to the field.
>
> In my opinion, both methods meet WCAG 2.0. However, keeping usability in mind, is there a preference to which method is used.
>
> _______
> Todd Liko
> Communications Advisor | Conseiller en communications
> Web Services | Services Web
> Communications and Marketing | Communications et Marketing
> 427 Laurier Avenue West (AEAD), Ottawa ON K1A 0N5
> 427 Avenue Laurier Ouest (AEAD), Ottawa (Ontario) K1A 0N5
> e-mail / courriel: <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >
> telephone / téléphone: 613-949-9425 | fax / télécopieur: 613-949-2386
> blackberry: 613-796-6375
> Government of Canada | Gouvernement du Canada
>
> > >