473,548 Members | 2,604 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Javascript form validation - comments please

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/
Jul 20 '05
69 5962
"e n | c k m a" <bo*@marley.com > wrote in message
news:7F******** *********@news-server.bigpond. net.au...
<snip>
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.


The most common alternative (and more precise) term for "object
detection" is "feature detection" as it takes into account that some of
the things that need detecting are not necessarily objects but may get
down to ECMA Script implementation details. Such as checking to see of
the String.replace method will accept a function reference as its second
argument (as is very usefully the case in later versions) with code
like:-

if('a'.replace(/a/, function(){retu rn '';}).length == 0){
//function references OK.
}else{
//no function references with replace.
}

(it works because if only string arguments are accepted as the second
argument the function is type-converted into a string and that string
has a length longer than zero.)

However, the code in question does not use object/feature detecting in
the sense that the term is used in connection with cross-browser
scripting. It uses a technique that is best categorised as "object
inference". Testing for the existence of one method, in this case the
document.getEle mentById method, and then assuming that the presence of
that feature can be used to infer the existence of other features,
dynamic support of either innerHTML or the W3C DOM interfaces to the
level of text nodes.

The assumption that the existence of the document.getEle mentById method
can be used to infer that the browser has full dynamic display
capabilities falls down in the face of, for example, Opera 5 & 6 and Web
Browser 2 (on the Palm OS (based on NetFront)) which both implement the
method but do not implement either of the required interfaces. (Opera 6
puts up a JavaScript error message and Web Browser 2 just fails
quietly).

A feature/object detecting script would have gone to the effort of
verifying the existence of the required dynamic interfaces before
attempting to use them. Not that knowing that an element has a text node
as its firstChild necessarily means that writing to the nodeValue
property of its firstChild will result in changes in the display, but at
least knowing that the firstChild property is a reference to an object
prevents the attempt to write to one of its properties from putting up a
JavaScript error report.

The general principals of feature/object detecting is to verify the
existence (and possibly behaviour) of any feature that can be verified
prior to using it and make as few assumptions as possible. In that way a
feature/object detecting script can exploit a browser up to the browsers
ability to support the script and still be in a position to cleanly
degrade under its own control in the face of the absence of the required
features without ever needing to be interested in any of the specifics
of which browser it is that it is executing on.

On the other hand, object inference, to be effective, requires a
detailed knowledge of the DOM/ECMA Script implementations of every
version of every JavaScript capable web browser, knowledge that nobody
sane could reasonably claim to posses.

Richard.
Jul 20 '05 #11
In article <0h************ ******@news-server.bigpond. net.au>,
ma**********@th e.time says...
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.


You sound bitter, and I can feel you pain (ok I can't but I will
pretend I can) Was the company based in the US? If so, then having the
drop down default to US is perfectly acceptable. Now, making you start
off with a completely new form, I can see how that would piss you off.

But, even so, from what I am reading, you needed a product. You spent
time researching it, and decided that of all the products available,
this one was the best. Then you went to order it, had the form thing
(which has to happen to you in one way or another all the time).

So you decided that since you had to fill in a new international order
form, you would buy a different product that for some reason you had
recently decided was inferior to the one you were originally trying to
order.

Seems kind of silly to me, that is, to buy an inferior product because
some web developer did something you did not like. I probably would
have bought the product, then bitched to them, then tell them you will
not recommend their product to anyone.

But of course, that would mean more typing again....

I admire your conviction for the cause. But I (especially now as I
transition out of Web development and into other things), just would
have handled it a little differently...

--
Whitecrest Entertainment
www.whitecrestent.com
Jul 20 '05 #12
On Fri, 05 Dec 2003 08:50:11 GMT, "e n | c k m a" <bo*@marley.com >
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.


I think you're right, but 'object detection' seems to be the generally
used term. Methods belong to objects, anyway.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #13
On 5 Dec 2003 09:17:26 GMT, "Philipp Lenssen" <in**@outer-court.com>
wrote:
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.


The intention is that the error text should supersede the original info
- i.e. contain everything the original text had, plus maybe a bit more.
I'll have another look at it.
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).
Yes, you do end up with some duplication. It's a question of how much
you feel is worth investing to help the user. The point of the page
(perhaps I should review whether it comes over) is not so much that you
should use client-side validation, but that *if* you do so, do it
properly.
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.


Debugging for non-Javascript browsers is pretty trivial though. And once
you've got yourself a set of standard routines, adding validation to new
forms isn't much work.

As for the benefits: it depends. With a broadband connection and a fast
server there probably isn't much benefit. Sometimes however one has to
wait 10-20 seconds for a server response. With a more complex form
and/or a not-so-careful user, needing 2 or 3 bites at the cherry, it
could save the user quite a bit of time.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #14
On Fri, 05 Dec 2003 10:36:20 +0000, David Leverton <u0*****@abdn.a c.uk>
wrote:
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)?


Yes, I could have a go at fixing the width. A similar problem was
discussed a little while ago somewhere in c.i.w.a.*, where someone
wanted a table to remain fixed once the initial display was completed.
There doesn't seem to be a general solution, but with this simple table
it might be possible to do something better. I think the height is going
to vary though, as spacing all the rows out enough to accommodate the
largest error-message probably won't look good.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #15
On Fri, 05 Dec 2003 08:24:28 GMT, "rf" <ma**********@t he.time> wrote:
"Stephen Poley" <sb*****@xs4all .nl> wrote in message
news:e4******* *************** **********@4ax. com...
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
Hnmm. What a terribly good idea.

And, what an excellent use of javascript - to *enhance* what is an already
working page.
Thanks.
<story> ....
I found some more suitable software :-)
</story>
Indeed. You wonder whether site owners have the slightest idea how many
people they are driving away.
<gripe>
You mention how much validation to do. I think you should add a section
giving some more examples of what *not* to do.


Yes, that could be a project in its own right. I think it would probably
be better as a separate page.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #16
"Whitecrest " <wh********@zip zap.com> wrote in message
news:MP******** *************** *@news.charter. net...
<snip>
So you decided that since you had to fill in a new international
order form, you would buy a different product that for some
reason you had recently decided was inferior to the one you were
originally trying to order.

Seems kind of silly to me, that is, to buy an inferior product
because some web developer did something you did not like.
You seem to be assuming that any product has just one distinct source
when purchased online. That isn't really the case, usually it is
possible to find many outlets offering the same products, and frequently
at the same prices. So the decision to purchase from a different
retailer doesn't mean choosing an inferior product it just means that
the retailer who initially managed to get themselves to the top of
Richard's list (maybe through search engine order, maybe by conveying a
superior air of professionalism through their presentation or some such)
then knocked themselves off his list by manifesting incompetence in with
online ordering system. And choosing to avoid doing business with a
company that publicly demonstrates incompetence strikes me as a wise
decision, probably saving money on the long run.
I probably would have bought the product, then bitched to
them, then tell them you will not recommend their product to
anyone.


Some businesses might care about their reputation (though that would
suggest that they should choose to employ competent web developers in
the first place) other will just be happy to be banking your money.

Richard.
Jul 20 '05 #17
In article <bq************ *******@news.de mon.co.uk>,
Ri*****@litotes .demon.co.uk says...
Seems kind of silly to me, that is, to buy an inferior product
because some web developer did something you did not like.

You seem to be assuming that any product has just one distinct source
when purchased online....


A lot of assumptions here actually, you are assuming they he could by it
somewhere else. When information is not supplied, we all have to make
assumptions.
I probably would have bought the product, then bitched to
them, then tell them you will not recommend their product to
anyone.

Some businesses might care about their reputation (though that would
suggest that they should choose to employ competent web developers in
the first place) other will just be happy to be banking your money.


Totally agree, but I got what I wanted, at the price I wanted, and I got
to bitch about it. Life is good....

--
Whitecrest Entertainment
www.whitecrestent.com
Jul 20 '05 #18
"Stephen Poley" <sb*****@xs4all .nl> wrote in message
news:e4******** *************** *********@4ax.c om...
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).


I like your point #2 and #3 about alert boxes and onblur interrupting the
flow of the page. This is something I've preached against in the Visual
Basic community for some years (MsgBox's and LostFocus events there).

I like the idea of using the CSS class to define the error message style.
This is something I've been doing in a site I'm re-designing right now.

On the javascript/no-javascript thing...I've been kicking this one around
myself. Some of the requirements I have do call for a degree of client-side
interactivity. Since it isn't a big general e-commerce site and is mainly
intended for internal people and affiliated businesses to use, I don't think
I'll encounter a significant user problem since about 95% are using IE6 and
the rest Mozilla under Linux. However, I do agree about having a graceful
way to degrade. Any further suggestions in this area would be a helpful
addition to your article.

--
Frank Carr
jf****@msn.com
http://www15.brinkster.com/vbnotebook
Jul 20 '05 #19
Stephen Poley wrote:
On 5 Dec 2003 09:17:26 GMT, "Philipp Lenssen" <in**@outer-court.com>
wrote:
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).

Yes, you do end up with some duplication. It's a question of how much
you feel is worth investing to help the user. The point of the page
(perhaps I should review whether it comes over) is not so much that
you should use client-side validation, but that if you do so, do it
properly.


You don't necessarily end up with duplication; e.g. you could store the
patterns, mandatory fields, default-values etc. inside XML on the
server and create the JavaScript code dynamically.
On Windows, you could even use JScript in ASP to have parts of the same
code sit around on the server and the client.

As for the benefits: it depends. With a broadband connection and a
fast server there probably isn't much benefit. Sometimes however one
has to wait 10-20 seconds for a server response. With a more complex
form and/or a not-so-careful user, needing 2 or 3 bites at the
cherry, it could save the user quite a bit of time.


I usually find response times of say 1 to 2 seconds OK. Of course when
it would take 20 seconds for a server response that's bad. But let's
say the validation is complex, then you _must_ do it on the server.
Imagine you want the user to enter his street adress and city and you
want to validate if that's a real street by comparing with your server
database. To do the same validation on the client would mean writing a
lot of code and send the data to the client. This might take much
longer than 20 seconds to download! (Besides, you might not want to
share the data.)
And then you have to do it all again on the server-side because you
don't know if the user has JavaScript!
Jul 20 '05 #20

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
4871
by: AnnMarie | last post by:
My JavaScript Form Validation doesn't work at all in Netscape, but it works fine in IE. I made some of the suggested changes which enabled it to work in IE. I couldn't make all the changes because then it didn't work in IE. How can I enable this javascipt form validation to work in Netscape? When I use netscape, none of the alert boxes...
72
5142
by: Stephen Poley | last post by:
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...
5
2663
by: Sue | last post by:
After finishing up my first quarter JavaScript on 12/12/03, I decided to improve character checking on my project. In my project I only had to do very basic validation. Therefore, I only had one function to verify the name fields, age, email and gender. My question is: if I create a function for each field like the code below, what would be...
10
6593
by: iam247 | last post by:
Hi In my prototype asp page (with no javascript and no password validation, I have a registration form with the following action: <form name="form" method="post" action="RegDetails.asp"> This works fine, the form details are collected by RegDetails.asp I am attempting to include javascript server side validation for the
5
2631
by: | last post by:
Hi all, Has anyone been able to write some custom javascript on the onclick event of submit button to do certain things like disable submit button, only submit form once etc. This was a breeze in 1.1 since I could edit the .js file. Now in 2.0 I can no longer do this. Also, my code would have to be called after all client-side validation...
1
1923
by: karen987 | last post by:
I have a comment form, on a news website, ASP page, which users fill in and it adds comments to a news article. The reader clicks on a headline and the comments open up in a new window. It already has server side validation in but i want to add some client side javascript validation. How can do i this when there is alreay a "returnvalidate...
13
323
by: Mtek | last post by:
Hi, We have a form defined with buttons like this: <a class="save_menu" href="javascript:document.Detail_Screen.action = 'savedata.php?screen=EDIT';document.Detail_Screen.submit();">Update</ a> The form also has an onSubmit action to vall a validation routine:
4
4466
by: Lewis Holmes | last post by:
Hi I have the following situation in one of my asp.net pages. The user can add multiple table rows to a form by selecting a button. These rows can contain asp.net controls. When this button is selected, the row is added using JavaScript. The script uses cloneNode to clone a hidden template row and all of its children and then adds the new...
0
7438
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7707
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
7951
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
5362
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
3495
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
3475
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1926
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1051
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
751
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.