WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

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.
-----Original Message-----
From: Liko, Todd [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Thursday, June 26, 2014 8:06 AM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Form validation - on submit or on each required field

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: 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

-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Liko, Todd
Sent: Thursday, June 26, 2014 10:06 AM
To: ' = EMAIL ADDRESS REMOVED = '
Subject: [WebAIM] Form validation - on submit or on each required field

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

This electronic message contains information generated by the USDA solely for the intended recipients. Any unauthorized interception of this message or the use or disclosure of the information it contains may violate the law and subject the violator to civil or criminal penalties. If you believe you have received this message in error, please notify the sender and delete the email immediately.

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

-----Original Message-----
From: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = > [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Liko, Todd
Sent: Thursday, June 26, 2014 10:06 AM
To: ' = EMAIL ADDRESS REMOVED = <mailto:' = EMAIL ADDRESS REMOVED = >'
Subject: [WebAIM] Form validation - on submit or on each required field

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 = ><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

This electronic message contains information generated by the USDA solely for the intended recipients. Any unauthorized interception of this message or the use or disclosure of the information it contains may violate the law and subject the violator to civil or criminal penalties. If you believe you have received this message in error, please notify the sender and delete the email immediately.

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

-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Rick Hill
Sent: Thursday, June 26, 2014 12:14 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Form validation - on submit or on each required field

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

-----Original Message-----
From: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = > [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Liko, Todd
Sent: Thursday, June 26, 2014 10:06 AM
To: ' = EMAIL ADDRESS REMOVED = <mailto:' = EMAIL ADDRESS REMOVED = >'
Subject: [WebAIM] Form validation - on submit or on each required field

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 = ><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

This electronic message contains information generated by the USDA solely for the intended recipients. Any unauthorized interception of this message or the use or disclosure of the information it contains may violate the law and subject the violator to civil or criminal penalties. If you believe you have received this message in error, please notify the sender and delete the email immediately.

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
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Rick Hill
> Sent: Thursday, June 26, 2014 12:14 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Form validation - on submit or on each required field
>
> 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
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = > [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Liko, Todd
> Sent: Thursday, June 26, 2014 10:06 AM
> To: ' = EMAIL ADDRESS REMOVED = <mailto:' = EMAIL ADDRESS REMOVED = >'
> Subject: [WebAIM] Form validation - on submit or on each required field
>
> 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 = ><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
>
> > >
>
>
>
> This electronic message contains information generated by the USDA solely for the intended recipients. Any unauthorized interception of this message or the use or disclosure of the information it contains may violate the law and subject the violator to civil or criminal penalties. If you believe you have received this message in error, please notify the sender and delete the email immediately.
> > >
> > > > >

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.



-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Paul J. Adam
Sent: Thursday, June 26, 2014 11:22 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Form validation - on submit or on each required field

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
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Rick Hill
> Sent: Thursday, June 26, 2014 12:14 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Form validation - on submit or on each required field
>
> 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
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Liko, Todd
> Sent: Thursday, June 26, 2014 10:06 AM
> To: ' = EMAIL ADDRESS REMOVED = <mailto:' = EMAIL ADDRESS REMOVED = >'
> Subject: [WebAIM] Form validation - on submit or on each required field
>
> 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 = ><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
>
> > = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>
>
>
>
> This electronic message contains information generated by the USDA solely for the intended recipients. Any unauthorized
interception of this message or the use or disclosure of the information it contains may violate the law and subject the violator to
civil or criminal penalties. If you believe you have received this message in error, please notify the sender and delete the email
immediately.
> > = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>
> > > > >