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/

[Lasse Reichstein Nielsen]

Dr John Stockton <sp**@merlyn.demon.co.uk> writes:

For ordinary, informative, bulk text, the words should be dark-on-light;
that is what readers have been accustomed to since ink-on-papyrus and
even soot-on-cave-wall.
It's not really that important, as long as the design is consistent.
People will read light-on-dark text without thinking twice without
thinking twice. I see many message boards using such a setup, where
a news site will probably want to look more like a newspaper.

The difference between a screen and ink-on-papyrus is that the screen
is back-lit. That makes black-on-white more straining on the eyes.
Light-on-dark is legible, but only suitable in small blocks that
need to be distinctive.

I can't find a reference for it, but I believe it's actually *more*
legible than dark-on-light on a back-lit screen.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

[Dr John Stockton]

JRS: In article <pa****************************@goddamn.co.uk>, seen in
news:comp.lang.javascript, Toby A Inkster <UseTheAddressInMySig@deadspam
..com> posted at Mon, 8 Dec 2003 07:35:20 :-

Dr John Stockton wrote:

IIRC & IMHO, there is a flaw of omission in the distribution - in what
one actually fetches. It does not, or did not, include a small text or
HTML file saying which version it is and where it comes from.

Running "tidy -version" will tell you which version you are using.

The manual (on Linux, "man tidy") tells you where you can download new
versions.

But the distribution does not include the manual; hence, the small file
should also refer to obtaining the manual.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME. ©
Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
I find MiniTrue useful for viewing/searching/altering files, at a DOS prompt;
free, DOS/Win/UNIX, <URL:http://www.idiotsdelight.net/minitrue/> Update soon?

[Dr John Stockton]

JRS: In article <4d********************************@4ax.com>, seen in
news:comp.lang.javascript, Stephen Poley <sb*****@xs4all.nl> posted at
Mon, 8 Dec 2003 16:16:34 :-

On Fri, 5 Dec 2003 23:38:13 +0000, Dr John Stockton
<sp**@merlyn.demon.co.uk> wrote:

The page currently lacks, AFAICS in MSIE 4 : Author name, date of
editing, links to homepage.

Links are (and were) present. Date added. I don't bother to put my name
on every page - maybe I could.

AFAICS in IE4, where "see" does not include reading the source.

This
appears to be all that it will do, except that the Send button also
tries to contact your Web site - without success, as I am offline. You
could add, apart from the ostensible form, a control to adapt behaviour
for off-line use.

I think it reasonable to assume that the user understands that 'send'
will not do a great deal when offline.

Certainly; but it could be useful, since Send merely transmits something
to be ignored, to provide a means whereby a user can play with it when
off-line without generating unnecessary errors.

You invite source viewing. Since you do not know what it will be viewed
with, ISTM that both HTML and script should be formatted for a
72-character right margin.

Interesting point. I think however that it is reasonable to expect that
anyone viewing HTML source should have an editor/viewer capable of
coping with longer lines. The script is already mostly less than 72
characters wide, with those lines which are longer being longer for a
reason.

I only have 72-character eyeballs; and, if one may be citing line
number, it's nice to be sure that it is the same number as the author
sees. But it all depends on what tools the author uses. Editing with
PFE, I can pack a paragraph rapidly. Granted, it's hard to avoid all
long lines.

Your actual validity-testing could be shortened by using the approach of
my js-valid.htm .

Well, your code is certainly impressively brief. But I feel mine is
easier to understand, and also more flexible for e.g. putting up
warnings when an input is likely to be incorrect but is not definitely
so. Compactness is not as important as it used to be, with faster modems
and HTTP data-compression. Maybe still important for mobile connections
using 9.6 Kbps, but I'm not sure how many of those devices support
Javascript anyway.

There is also the point that, in larger forms, the author does not have
to handle great lengths of repetitive stuff.

I'd not thought of warnings. As is, the object that defines a line has
two entries that do testing; optional entries for tests with different
responses could be added. Certainly, it is intended as a demonstration
to be adapted for actual use, and I've just added words to that effect.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://jibbering.com/faq/> Jim Ley's FAQ for news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> JS maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/JS/&c., FAQ topics, links.

[Toby A Inkster]

Dr John Stockton wrote:

But the distribution does not include the manual;

Mine did.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

[Stephen Poley]

On Mon, 08 Dec 2003 18:30:05 +0000, Toby A Inkster
<Us******************@deadspam.com> wrote:

Stephen Poley wrote:

On Fri, 5 Dec 2003 23:38:13 +0000, Dr John Stockton
<sp**@merlyn.demon.co.uk> wrote:

W3's free TIDY said :

line 9 column 5 - Warning: inserting "type" attribute for <link> element
Bit redundant, as the stylesheet is not specific to any particular media
type.

@type isn't used for media types. For a CSS stylesheet, @type should be
set to "text/css".

@media is used for media types.

Hmm ... I think we both had our brains idling here. The issue is the
type attribute of the link element. I managed to completely misread the
relevant bit of the HTML spec; you appear to be thinking of a different
spec entirely. '@type'?

What I would have said if my brain had been in gear at the time
(assuming it now is):

Bit redundant, as the type of the stylesheet is primarily defined by the
HTTP headers (at least, I have heard this claimed often enough that I'm
inclined to believe it - must study the RFCs myself one day). Presumably
this attribute only saves browsers from retrieving stylesheets they
don't understand, and I don't think there are any web-browsers in the
wild which handle stylesheets but not CSS - are there?

--
Stephen Poley

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

[Vigil]

Hmm. I am using Opera 7.23 on an Athlon XP 2something. I have also checked
with the Mozillas and MSIE in WinXP (same machine). Always the CPU load
goes up. Try running a CPU load monitor and yours should too.
Alternatively, make a test page without the static bg and put them side by
side, scroll each and you might notice the static bg page is slightly less
smooth (depending on your CPU, of course). I've heard it reported that it
does it on all browsers.

On Mon, 08 Dec 2003 16:16:35 +0100, Stephen Poley wrote:

Is it just me that is sent
into CPU overwork when a static bg is used?

I've had one person complain about that before; it turned out he was
running Netscape 7 / Mozilla (I forget which) on a machine slower than
the recommended minimum hardware configuration. What is your
configuration?

--

..

[Tux]

I want to produce a form for competition entry which would need minimal
editing from year to year. Since the entrants to the competition would have
to have birthdates between certain limits I would want to calculate these
and add the results to a selection list, something like

<select>
<option>Under-10 (born 1994 to 1996</option>
<option>Under-12 (born 1992 or 1993</option>

etc.

where the option values would include some javascript, e.g.

<option>Under-10
<script type="text/javascript">
document.write(" (born " + u10Lower + " to " + u10Upper + ")");
</script>
</option>

I have limited access to server side scripting, hence the reason for doing
it on the client side.

However, scripting seems to be illegal within an <option> tag. Does anyone
have any idea how I could do this?

--
Colin Walls
Extract the michael to mail me

[Toby A Inkster]

Stephen Poley wrote:

'@type'?

Short for 'the attribute "type"'. This derives from the XPath spec.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

[Toby A Inkster]

Stephen Poley wrote:

I don't think there are any web-browsers in the
wild which handle stylesheets but not CSS - are there?

No, but there are browsers that handle non-CSS style sheets (e.g. XSLT in
MSIE and Mozilla; JSSS in NN4)

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

[Stephen Poley]

On Sat, 06 Dec 2003 16:09:44 GMT, ji*@jibbering.com (Jim Ley) wrote:

On Sat, 6 Dec 2003 02:09:51 -0000, "Richard Cornford"
<Ri*****@litotes.demon.co.uk> wrote:

"Stephen Poley" <sb*****@xs4all.nl> wrote in message
news:8a********************************@4ax.com. ..

|if (!elem.firstChild && !elem.innerHTML)

I forgot to mention that the innerHTML test may not be the best as empty
strings type-convert to boolean false, so - !elem.innerHTML - will be
true if the innerHTML string exists but is empty.
I don't like innerHTML for a different reason... that is it could be
read-only or whatever,

Perhaps you could explain a bit. Under what circumstances would that
arise?
so if you're going to test to see if changing
innerHTML works you can do it with

foo.innerHTML='<b>Chickens</b>'

if (foo.childNodes etc. or whatever non innerHTML methods you prefer
to test the existence of elements.

I'd be happy to bin innerHTML completely, but I understand that it's the
best available with IE - unless you know different?

--
Stephen Poley

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

[Stephen Poley]

On Sat, 6 Dec 2003 08:00:10 +0100, "Nico Schuyt" <ns*****@hotmail.com>
wrote:

Stephen Poley wrote:

http://www.xs4all.nl/~sbpoley/webmatters/formval.html
Nice! But why still apply js when the server side testing is so complete?

I do try to explain that on the page.
IMO the form should :
- use cookies to prevent people have to fill in all the fields again next
time
Could be appropriate in some cases, but OTOH some forms tend only to get
filled in once. And of course quite a lot of people have cookies
disabled. A bit out of the scope of this article.
- send a copy of the mail to the sender (I hate to make copies myself or not
knowing later what exactly I submitted)

Good point, but not an appropriate feature of the form itself - that
would need to be done by the server script. (And one would of course
need anti-spammer precautions).

--
Stephen Poley

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

[Stephen Poley]

On Tue, 09 Dec 2003 14:30:14 +0000, Vigil <[e-mail]> wrote:

Hmm. I am using Opera 7.23 on an Athlon XP 2something. I have also checked
with the Mozillas and MSIE in WinXP (same machine). Always the CPU load
goes up. Try running a CPU load monitor and yours should too.
Alternatively, make a test page without the static bg and put them side by
side, scroll each and you might notice the static bg page is slightly less
smooth (depending on your CPU, of course). I've heard it reported that it
does it on all browsers.

On Mon, 08 Dec 2003 16:16:35 +0100, Stephen Poley wrote:

Is it just me that is sent
into CPU overwork when a static bg is used?

I've had one person complain about that before; it turned out he was
running Netscape 7 / Mozilla (I forget which) on a machine slower than
the recommended minimum hardware configuration. What is your
configuration?

I did make a test page as you suggested, but I couldn't see any
difference to the smoothness of scrolling. The CPU load went up to 100%
in both cases. I'm using Opera 7.21.

Not sure what my CPU is, but it was the slowest [1] I could find when I
bought it just under 18 months ago.

[1] OK, cheapest.

--
Stephen Poley

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

[Lasse Reichstein Nielsen]

Toby A Inkster <Us******************@deadspam.com> writes:

Stephen Poley wrote:

'@type'?

Short for 'the attribute "type"'. This derives from the XPath spec.

Bad choice in combination with @media, which is a CSS declaration.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

[Lasse Reichstein Nielsen]

Stephen Poley <sb*****@xs4all.nl> writes:

I'd be happy to bin innerHTML completely, but I understand that it's the
best available with IE - unless you know different?

It is the best available to IE 4.
You can use W3C DOM methods in IE 5 and forward.

IE 4 is about as usable as Netscape 4, but both still have users. Sadly.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

[Dr John Stockton]

JRS: In article <pa****************************@goddamn.co.uk>, seen in
news:comp.lang.javascript, Toby A Inkster <UseTheAddressInMySig@deadspam
..com> posted at Tue, 9 Dec 2003 07:35:06 :-

Dr John Stockton wrote:

But the distribution does not include the manual;

Mine did.

If you got a version that will run at a Win98 DOS prompt, what was the
URL you got it from?

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://jibbering.com/faq/> Jim Ley's FAQ for news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> JSc maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/JSc/&c, FAQ topics, links.

[Toby A Inkster]

Dr John Stockton wrote:

If you got a version that will run at a Win98 DOS prompt, what was the
URL you got it from?

No, I have a version that runs from the Linux tcsh prompt.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

[Thomas 'PointedEars' Lahn]

Stephen Poley wrote:

My feeling is that if an error can only be triggered by an *authoring*
mistake (such as mistyping an id) then it's probably better to let it
trigger a Javascript error which tells the author where to look, rather
than have it do nothing and leave one scratching ones head.

The problem is that JavaScript errors are not always visibly announced,
so if you want to make sure that authors see their mistakes, you need
to use alert(...).

BTW please stop crossposting, this ha[ds] nothing to do with HTML anymore.
F'up2 cljs

PointedEars

[Vigil]

Odd that it should go up to 100% on a 'normal' (no static bg) page...

On Tue, 09 Dec 2003 22:06:12 +0100, Stephen Poley wrote:

I did make a test page as you suggested, but I couldn't see any difference
to the smoothness of scrolling. The CPU load went up to 100% in both
cases. I'm using Opera 7.21.

--

..

[Stephen Poley]

On Tue, 09 Dec 2003 23:36:33 +0100, Lasse Reichstein Nielsen
<lr*@hotpop.com> wrote:

Stephen Poley <sb*****@xs4all.nl> writes:

I'd be happy to bin innerHTML completely, but I understand that it's the
best available with IE - unless you know different?

It is the best available to IE 4.
You can use W3C DOM methods in IE 5 and forward.

I understood IE 5 was almost a dead loss as far as the W3C DOM was
concerned, but your comment prodded me to go Googling, and
http://www.quirksmode.org/dom/w3c_core.html suggests it's not as bad as
I had thought.

However I've now discovered (to my surprise) that Opera 7 requires the
innerHTML version. :-(

--
Stephen Poley

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

[Dr John Stockton]

JRS: In article <pa****************************@goddamn.co.uk>, seen in
news:comp.lang.javascript, Toby A Inkster <UseTheAddressInMySig@deadspam
..com> posted at Wed, 10 Dec 2003 07:25:09 :-

Dr John Stockton wrote:

If you got a version that will run at a Win98 DOS prompt, what was the
URL you got it from?

No, I have a version that runs from the Linux tcsh prompt.

In that case, there is not necessarily a later DOS-32 compilation;
though the equivalent to what you have ought to be available to me.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME. ©
Web <URL:http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms
PAS EXE etc : <URL:http://www.merlyn.demon.co.uk/programs/> - see 00index.htm
Dates - miscdate.htm moredate.htm js-dates.htm pas-time.htm critdate.htm etc.