473,837 Members | 1,710 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 #1
72 5261
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
Jul 20 '05 #2
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 +61 2 5555 5555. 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.

Jul 20 '05 #3
> 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.
Jul 20 '05 #4
> > 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.

Jul 20 '05 #5
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.

Jul 20 '05 #6
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.
Jul 20 '05 #7
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

Jul 20 '05 #8
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)?

Jul 20 '05 #9
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/
Jul 20 '05 #10

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

Similar topics

7
4895
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 appear. It submits the form without validating anything.
5
2697
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 the best way to organize the functions and call them? Would I need one main function and place...
69
6046
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 happened. Looking round the pages on Javascript form validation that Google produced for me (well,...
10
6619
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
2652
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 was done and was successful. Any ideas? TIA!
1
1964
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 comment()" in? The only two fields i want to validate are "subject" and "comment" since the rest are drawn...
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
4494
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 row to the table, updates all of the child control Ids and sets visibility etc. The hidden...
0
9847
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
10583
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 captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10638
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10280
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9419
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7824
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 instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5680
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 the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
4481
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
3
3128
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 effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.