E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: Form validation

Number of posts in this thread: 4 (In chronological order)

From: ben morrison
Date: Wed, Feb 08 2006 5:15AM
Subject: Form validation
No previous message | Next message →

Hi,

I've just finished improving our javascript form validation and would
be grateful for opinions.

This will be done server side as well once we are happy with the format.

On submission if any errors are found this is what happens:

1. Page title changes to indicate errors
2. Explanation text is written into the page
3. The page jumps to the error text.
3. A list of errors which link to each form element is written in
(uses focus insted of anchors)
4. Each area is flagged up with a coloured background.

The only thing I have left out is a alert box - is this needed?

http://tinyurl.com/aqw4v

sources:
http://www.standards-schmandards.com/index.php?2005/06/25/21-accessible-errors
http://www-306.ibm.com/able/guidelines/web/webforms.html#reqtechniques
http://www.quirksmode.org/dom/error.html
http://www.onlinetools.org/articles/unobtrusivejavascript/chapter5.html

Ben.

PS I'm sure christian will cringe at my javascript.

From: Patrick H. Lauke
Date: Thu, Feb 09 2006 6:30PM
Subject: Re: Form validation
← Previous message | Next message →

ben morrison wrote:

> I've just finished improving our javascript form validation and would
> be grateful for opinions.

Instead of the "* indicates a required field", could you not just have
something like "Name (required)" as label (could even be wrapped in a
span and styled a little bit smaller than the main label text, a la
<label for="name">Name (required)</label>) ?

> 3. A list of errors which link to each form element is written in
> (uses focus insted of anchors)

So, if this is also generated server-side if javascript is disabled, you
should also make the links work to a certain extent. Currently, w/out
javascript, hitting the link does not focus the relevant input, as
expected, but then hitting TAB jumps to the *following* input. To work
around this, you may have to give an id to the label or parent div, so
the focus/caret is placed before the input and a subsequent TAB should
go to it. Obviously, this would also need a subtle change to the focusMe
function.

> 4. Each area is flagged up with a coloured background.

Could you also changed the label text? If you take my previous
suggestion into account, you could end up with a label like "Error: Name
(required)" or similar.

> The only thing I have left out is a alert box - is this needed?

Not sure if it's needed, but it shouldn't hurt either.

P
--
Patrick H. Lauke
___________
re

From: ben morrison
Date: Mon, Feb 13 2006 6:00AM
Subject: Re: Form validation
← Previous message | Next message →

> > I've just finished improving our javascript form validation and would
> > be grateful for opinions.
>
> Instead of the "* indicates a required field", could you not just have
> something like "Name (required)" as label (could even be wrapped in a
> span and styled a little bit smaller than the main label text, a la
> <label for="name">Name (required)</label>) ?

Nice idea, I could use (required) for leaner code too.

> > 3. A list of errors which link to each form element is written in
> > (uses focus insted of anchors)
>
> So, if this is also generated server-side if javascript is disabled, you
> should also make the links work to a certain extent. Currently, w/out
> javascript, hitting the link does not focus the relevant input, as
> expected, but then hitting TAB jumps to the *following* input. To work
> around this, you may have to give an id to the label or parent div, so
> the focus/caret is placed before the input and a subsequent TAB should
> go to it. Obviously, this would also need a subtle change to the focusMe
> function.

Agreed, the focus is annoying and a parent id will be needed for server side.

> > 4. Each area is flagged up with a coloured background.
>
> Could you also changed the label text? If you take my previous
> suggestion into account, you could end up with a label like "Error: Name
> (required)" or similar.

Another good idea, thanks. Error: Name (required)

> > The only thing I have left out is a alert box - is this needed?
>
> Not sure if it's needed, but it shouldn't hurt either.
>

My only concern was that screenreaders may not realise the page has
changed, which is why i changed the title and jumped to the error
text. If this is confusing i'll happily add an alert box too.

Thanks for your input.

Ben

From: Patrick H. Lauke
Date: Mon, Feb 13 2006 11:45AM
Subject: Re: Form validation
← Previous message | No next message

ben morrison wrote:

> Nice idea, I could use (required) for leaner code too.

> Another good idea, thanks. Error: Name (required)

*Nods vigorously*

P
--
Patrick H. Lauke
___________
re