Skip to main content

Javascript form validation

One of the most popular uses of Javascript is when it comes to validating user input on a form. The most hateful way, though, is by not using onsubmit. A number of times I come across code where someone uses an image in place of the submit button and uses the onclick event which will validate then submit the form. Yeauch! Very bad practice!

The first thing to do with the form is place the Javascript function in the onsubmit attribute for the form, e.g.

<form name="reg" method="post" onsubmit="return validateForm();"

The use of return lets the form submit when the function returns true. If the function does not return true (i.e. false) then the form will not submit - as shown below.

function validateForm(){
return false;

Getting a reference to the form is the next step. There are a number of ways to do this:

  1. document.forms[0]

  2. document.forms['reg']

  3. document.getElementById('reg') This will work when id is used on the form

  4. Passing an object reference through the onsubmit handler

My preference is number 5. Passing the reference is achieved using the this keyword. So the onsubmit handler will look like

<form name="reg" method="post" onsubmit="return validateForm(this);"

and the function header would be. The function also demonstrates how a field is accessed

function validateForm(formObj){
return false;

As you can see this is much more straightforward and is pretty much cross-browser compatible. This has been tested with IE (6 and 7), Firefox (2 and 3), Google Chrome and Safari (v3 and v4) on the PC. And also tested on the Mac with Firefox 2 and Safari 2.

To actually do things with the form, a good tutorial exists over at


Popular posts from this blog

Open Source alternatives to Adobe Creative Suite

With the take over of Macromedia by Adobe, they have increased their arsenal of design packages, as well as the price. No-one can do pretty much without the popular package of Photoshop for their images, and Dreamweaver for websites, especially aspiring design students who do not have much money.

Nevertheless, open source software has come to save the day. What is open source software? In a nutshell it is free software with its source-code freely available to those who would like to expand or improve on the software. To expand further, anyone who’s tinkered with the source code such as optimisation or additional functionality can resubmit it back to the holders and let others enjoy the fruits of your labour.

I have trawled through the World Wide Web to find out how everyone can benefit from Open Source to build up their own studio and compete against Adobe Creative Suite. All this for free, apart from the cost of the Internet. I am planning to have a facility where you can purchase th…

Open Source alternatives to Adobe Creative Suite update

Oh yes, an update to an earlier post about getting hold of free or Open Source alternatives to Adobe Creative Suite.

I actually forgot to mention about Adobe ImageReady, which gets bundled with Photoshop. There are a number of basic animation tools, but none provide flexibility similar to ImageReady. Fortunately, Open Source lovers are in for a surprise in the form of GIMP Animation Package. This link will take you to the Windows download site as I cannot find any references to this for the Mac OS. Chances are that it could be part of the download, but I haven't had time to inspect this.

The Creative Suite package includes Adobe Bridge, which is a thumbnail viewer to convert images and open them up in any Adobe application for editing. No matter how they would try to trump up its name, it is still a thumbnail viewer. The best free application out there for this is IrfanView. Need I say more?

Are there any pixel pushers out there, who prefer to simply draw their own pics? Why…

ASP Reverse For Loop

It's kind of interesting of how reverse linking does not seem so obvious in classic ASP.  You would think that it would be along the lines of:

dim i
for i = 30 to 2
  'code comes here

but it's not.  To have a reverse For loop it's:

dim i
for i = 30 to 2 Step-1
  'code comes here

That's right that small bit (Step-1) makes all the difference.  I stumbled upon this by chance and thought that someone would benefit from this.

Happy coding.Blogged with Flock