melbourne chapter

JavaScript provides us with a simple solution for form validation. Being completely client-side means that we can validate user data before we even make a request to the server, saving unnecessary load on the server. We can also prompt the user with dialogs in the form of alert and confirmation boxes. JavaScript isn’t without its disadvantages though. The biggest issue with JavaScript is that end-users must have active-scripting (JavaScript) enabled in their browsers. While a majority of browsers are JavaScript enabled by default, IE 6 Service Pack 2 users and those with 3rd Party Script blockers in Firefox will be alerted, and as a result paranoid users may choose to disable active-scripting on your web page.

Let’s take a look at a simple example of some JavaScript validation:

Line by line…

In the form creation we use the JavaScript onsubmit() function, which fires when a form element receives a request to submit. In this case I have used it to call my form validation function validate(), passing a relative reference to the form. Note the

return

statement. This is used to return the result of our validation to decide whether we send the request or not (i.e. a value of false will abort the request).

function validate(form) {

Since we passed a relative reference we can now reference all our form values via

form.<field>.value</field>

. Alternatively you could always store a reference to the form in a local variable, but passing but reference makes much more sense.

errStack = new Array();

Here I create an array to store my error messages. You can always concatenate a string of error messages and use a boolean variable to flag errors, however using an array means we can store a message, and then later check the length of this array to see if we have any error messages.

if (form.first_name.value == “”) {
errStack.push(”Please enter your first name”);

}

As mentioned above passing the relative reference to the form means we can now reference form elements using the relative reference of

form.field.value

. Here I check the value of the first_name field is not empty. If the value is empty I then “push” and error message into my errors stack errStack.

if (errStack.length > 0) {
alert(errStack.join(”\n”));

return false;
}

Following our field checks we have a final if() statement to check the length of our errors stack errStack. If the stack is longer than zero we have error messages that need to be reported to the screen. To do this we join all our error messages, delimited by the \n escape character so that each message is printed on a newline within the alert() box. Finally we return

false

which in turn aborts the form request.

return true;
}

On the other hand if the form passes all our checks we return

true

That was easy wasn’t it?

By no means is this the only way to validate a form using JavaScript but hopefully it provides you with an idea. For more references to JavaScript, and JavaScript validation I recommend visiting the W3Schools website.