E-mail List Archives
Thread: Form validation - on submit or on each required field
Number of posts in this thread: 9 (In chronological order)
From: Liko, Todd
Date: Thu, Jun 26 2014 8:05AM
Subject: Form validation - on submit or on each required field
No previous message | Next message →
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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS 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
From: Don Mauck
Date: Thu, Jun 26 2014 8:07AM
Subject: Re: Form validation - on submit or on each required field
← Previous message | Next message →
I prefer the ladder.
From: Jukka K. Korpela
Date: Thu, Jun 26 2014 8:31AM
Subject: Re: Form validation - on submit or on each required field
← Previous message | Next message →
2014-06-26 17:05, Liko, Todd wrote:
> 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.
There are strong reasons to check data both when it is entered, in a
browser, and after it has been entered and submitted, in the server. The
latter is needed for data security and often also to run some tests that
can only be run server-side.
> 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.
WCAG 2.0 seems to be silent about this issue. But if we put
accessibility recommendations aside and think of accessibility, it is
rather evident that mostly an error message should be issued as early as
possible, i.e. client-side. The reason is that getting a message right
after entering incorrect data makes it clear what the message relates
to. The user still has the specific question and answer in his mind and
he is better prepared to making a correction than after having dealt
with perhaps dozens of other questions in the meantime.
If error messages are issued only after all data has been entered, it
can be very difficult to relate them to what the user did. This applies
particularly to people with cognitive disabilities. An additional point
is that if a user sees a large number of error messages, he may get
disturbed and distressed, perhaps thinking he can never have all the
errors corrected - even though he could well deal with them if presented
one at a time.
However, some people might prefer entering all the data first, then
getting feedback of what went wrong and correcting the mistakes. It
would of course be technically possible to have an option "do not check
input data when typing" or something like that, but to most people, that
would be an unnecessary, possibly problematic option.
Yucca
From: Clark, Michelle - NRCS, Washington, DC
Date: Thu, Jun 26 2014 8:36AM
Subject: Re: Form validation - on submit or on each required field
← Previous message | Next message →
My preference is to validate at the time of inputting the information. That way, once a user gets to the end, the form is correct and can be submitted.
Michelle
From: Paul J. Adam
Date: Thu, Jun 26 2014 9:20AM
Subject: Re: Form validation - on submit or on each required field
← Previous message | Next message →
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 ADDRESS 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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS 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
>
> > >
From: Rick Hill
Date: Thu, Jun 26 2014 11:13AM
Subject: Re: Form validation - on submit or on each required field
← Previous message | Next message →
You always need to validate on server side. Using only client-side validation opens you up to evil clients who can fiddle with your input information. Client-side is basically an add-on with added benefits, but server-side is a must.
-------------------------------------------------------------------
Rick Hill, Web CMS Administrator
Strategic Communications, UC Davis
From: <Clark>, "<Michelle - NRCS>", <Washington>, DC < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>
Reply-To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>
Date: Thursday, June 26, 2014 at 7:36 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>
Subject: Re: [WebAIM] Form validation - on submit or on each required field
My preference is to validate at the time of inputting the information. That way, once a user gets to the end, the form is correct and can be submitted.
Michelle
From: Stanzel, Susan - FSA, Kansas City, MO
Date: Thu, Jun 26 2014 11:18AM
Subject: Re: Form validation - on submit or on each required field
← Previous message | Next message →
When the errors are returned at the top of the page are they supposed to be read automatically? I am coding JSP with the use of struts. I work at the United States Department of Agriculture.
Susie Stanzel
From: Paul J. Adam
Date: Thu, Jun 26 2014 12:22PM
Subject: Re: Form validation - on submit or on each required field
← Previous message | Next message →
It's always best to send focus directly to the errors so the screen reader does not go silent on a bad submit and assume the form is broken.
If you're doing a page reload you could still send focus to them with JavaScript .focus(), make sure the errors are programmatically associated with the invalid inputs also so they hear them when TABing.
If the invalid input has an associated error message you could also use HTML5 autofocus to grab it on page reload.
Paul J. Adam
Accessibility Evangelist
www.deque.com
On Jun 26, 2014, at 12:18 PM, Stanzel, Susan - FSA, Kansas City, MO < = EMAIL ADDRESS REMOVED = > wrote:
> When the errors are returned at the top of the page are they supposed to be read automatically? I am coding JSP with the use of struts. I work at the United States Department of Agriculture.
>
> Susie Stanzel
>
>
From: Bryan Garaventa
Date: Thu, Jun 26 2014 2:03PM
Subject: Re: Form validation - on submit or on each required field
← Previous message | No next message
If the page doesn't refresh, you can optionally dynamically add aria-describedby to the first form field in error before setting
focus to it via .focus(), and have aria-describedby point to the ID of the error container that relates to it.
This then allows the user to hear the error text, and gives them the ability to type directly into the field with the error without
having to hunt for it.
If more than one field is in error, as the user tabs through the form again, the error associated with the field via
aria-describedby will be announced.