Javascript form validation - comments please

[Stephen Poley]

I have quite often (as have probably many of you) come across HTML forms
with irritating bits of Javascript attached. The last straw on this
particular camel's back was a large form I was asked to complete in
connection with attendance at a seminar. After spending more than 15
minutes on it, I clicked on the submit button - and nothing happened.

Looking round the pages on Javascript form validation that Google
produced for me (well, 15-20 of them!), none seemed to emphasise the
points that I feel to be important. And some even advocated bad
practices. So I decided to stick my neck out and produce a page on how
it ought to be done:

http://www.xs4all.nl/~sbpoley/webmatters/formval.html

I would be interested in comments, suggested improvements etc. In
particular any cross-browser Javascript aspects I have overlooked.
(I've tried the page in Opera 7, Mozilla 1.1, IE 6, NN4).

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[brucie]

in post <news:e4******* *************** **********@4ax. com>
Stephen Poley said:

I have quite often (as have probably many of you) come across HTML forms
with irritating bits of Javascript attached. The last straw on this
particular camel's back was a large form I was asked to complete in
connection with attendance at a seminar. After spending more than 15
minutes on it, I clicked on the submit button - and nothing happened.
in my experience thats normal behavior. i'm constantly amazed at how bad
form design is. the creators just don't think.
http://www.xs4all.nl/~sbpoley/webmatters/formval.html

very good. where you mention trailing whitespace you may like to add
line breaks as well which isn't uncommon when copy/pasting (recent
experience, took me ages to work out why my text was being rejected)

NS4.76: http://stuff.bruciesusenetshit.info/screencap09.png [35k]
--
brucie
05/December/2003 05:37:51 pm kilo

[rf]

"Stephen Poley" <sb*****@xs4all .nl> wrote in message
news:e4******** *************** *********@4ax.c om...

I have quite often (as have probably many of you) come across HTML forms
with irritating bits of Javascript attached. The last straw on this
particular camel's back was a large form I was asked to complete in
connection with attendance at a seminar. After spending more than 15
minutes on it, I clicked on the submit button - and nothing happened.

Looking round the pages on Javascript form validation that Google
produced for me (well, 15-20 of them!), none seemed to emphasise the
points that I feel to be important. And some even advocated bad
practices. So I decided to stick my neck out and produce a page on how
it ought to be done:

http://www.xs4all.nl/~sbpoley/webmatters/formval.html

I would be interested in comments, suggested improvements etc. In
particular any cross-browser Javascript aspects I have overlooked.
(I've tried the page in Opera 7, Mozilla 1.1, IE 6, NN4).

Hnmm. What a terribly good idea.

And, what an excellent use of javascript - to *enhance* what is an already
working page.

<story>
Came across some software I thought I might like. The demo download required
filling in a form with all the usual intrusive questions. Some twenty of
them.

Right at the bottom is the standard address fields with the <annoying> drop
down country selection </annoying>. So, having filled in the entire form I
change the country from the default USA (of course) to Australia.

Immediately a new "internatio nal" form fills my canvas, with, as you may
guess, all of the fields blank.

I found some more suitable software :-)
</story>

<gripe>
You mention how much validation to do. I think you should add a section
giving some more examples of what *not* to do.

I was required to answer questions once on a computer at, of all places, a
ski rental shop in (you guessed it) the U S of A. Mammoth to be exact. This
computer insisted my postcode (they called it a zip code) had to be exactly
5 digits long. My postcode is 2154. Of course I lied.

Same form insisted my phone number must be of the form 555 555 555 (IIRC).
Mine is [phone]. I lied again.

Same form had an <annoying> drop down state selection </annoying>. NSW was
not in there, just things like CA, CO, NY etc. Needless to say I, and the
other 5 Australians with me, lied.

So much for their demographics :-)
</gripe>

Cheers
Richard.

[e n | c k m a]

> http://www.xs4all.nl/~sbpoley/webmatters/formval.html

I would be interested in comments, suggested improvements etc. In
particular any cross-browser Javascript aspects I have overlooked.
(I've tried the page in Opera 7, Mozilla 1.1, IE 6, NN4).

Very good idea - I was putting thought into a sign-up form i'm creating at
the moment and was thinking of adding features like focus changes and alert
boxes but decided against it because it annoys users and interferes with
their movements on the page... maybe you can work that in some how - unless
someone has any ideas as to why they should be included (ie. the alert box
in your first example form)

Nicko.

[e n | c k m a]

> > I would be interested in comments, suggested improvements etc. In

particular any cross-browser Javascript aspects I have overlooked.
(I've tried the page in Opera 7, Mozilla 1.1, IE 6, NN4).
Very good idea - I was putting thought into a sign-up form i'm creating at
the moment and was thinking of adding features like focus changes and

alert boxes but decided against it because it annoys users and interferes with
their movements on the page... maybe you can work that in some how - unless someone has any ideas as to why they should be included (ie. the alert box
in your first example form)
Also: "The detection of these older browsers is done by object detection,"

I think it's referred to as "method detection", isn't it? You're not really
detecting objects, but methods.
Nicko.

[Leif K-Brooks]

e n | c k m a wrote:

Also: "The detection of these older browsers is done by object detection,"

I think it's referred to as "method detection", isn't it? You're not really
detecting objects, but methods.

Methods are just a type of object in ECMAScript, IIRC.

[Philipp Lenssen]

Stephen Poley wrote:

http://www.xs4all.nl/~sbpoley/webmatters/formval.html

I would be interested in comments, suggested improvements etc. In
particular any cross-browser Javascript aspects I have overlooked.
(I've tried the page in Opera 7, Mozilla 1.1, IE 6, NN4).

Checking your sample form, I found it quite confusing the original
input information text (to the right-side) disappeared when you click
submit and get errors.

What I think is important is that validation data should only be stored
once, or else you would implement validation on the client and on the
server (and you would need to change two things for every change).

What I don't find optimal is that you need to debug for
JavaScript-enabled plus non-JavaScript browsers, with little to gain,
except maybe a split-second when it comes to replies.

[Matthias Gutfeldt]

e n | c k m a wrote:

http://www.xs4all.nl/~sbpoley/webmatters/formval.html

I would be interested in comments, suggested improvements etc. In
particular any cross-browser Javascript aspects I have overlooked.
(I've tried the page in Opera 7, Mozilla 1.1, IE 6, NN4).

Very good idea - I was putting thought into a sign-up form i'm creating at
the moment and was thinking of adding features like focus changes and alert
boxes but decided against it because it annoys users and interferes with
their movements on the page... maybe you can work that in some how - unless
someone has any ideas as to why they should be included (ie. the alert box
in your first example form)

Yeah, alert boxes are hell... you want to skip an item to fill it in
later. But the form throws an alert box at you and won't let you do it.
You CAN'T fill it in later - the alert box won't let you! This really
sucks, it's one of the most annoying 'features' I have found in forms.
Matthias

[David Leverton]

Stephen Poley wrote:
[snip]

http://www.xs4all.nl/~sbpoley/webmatters/formval.html

I would be interested in comments, suggested improvements etc. In
particular any cross-browser Javascript aspects I have overlooked.
(I've tried the page in Opera 7, Mozilla 1.1, IE 6, NN4).

Pretty good, the only problem I can see is that changing the messages
next to the form fields causes bits of the page to shift around (in Moz
1.5 and IE 6, at least), which is mildly annoying. Perhaps set a fixed
width and height for the relevant table cells (in CSS, with the em unit
so it adapts to the user's font size)?

[Stephen Poley]

On Fri, 5 Dec 2003 18:15:30 +1000, brucie
<br******@bruci esusenetshit.in fo> wrote:

That was a quick response! Thanks.

in post <news:e4******* *************** **********@4ax. com>
Stephen Poley said:

I have quite often (as have probably many of you) come across HTML forms
with irritating bits of Javascript attached. The last straw on this
particular camel's back was a large form I was asked to complete in
connection with attendance at a seminar. After spending more than 15
minutes on it, I clicked on the submit button - and nothing happened.
in my experience thats normal behavior. i'm constantly amazed at how bad
form design is. the creators just don't think.

http://www.xs4all.nl/~sbpoley/webmatters/formval.html

very good. where you mention trailing whitespace you may like to add
line breaks as well which isn't uncommon when copy/pasting (recent
experience, took me ages to work out why my text was being rejected)

Good point.
NS4.76: http://stuff.bruciesusenetshit.info/screencap09.png [35k]

<sound of head hitting wall> It was fine yesterday morning, and all
I've done since then is add a few lines of text. I guess I'm going to
give up and hide all my CSS from NN4, as is frequently recommended
around these parts.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/