Logo         Community
  Trog
Services
The Company
Community
Columns
Your Account
Contact Us
 
 
Form Validation With JavaScript
Write a simple JavaScript form validator for client-side validation of user input.

| Check Point |

In order to illustrate how form validation typically works, consider the following simple example:


<html>
<head>
<basefont face="Arial">
<script language="JavaScript">
function validateForm()
{
// check name
if (document.forms[0].elements[0].value == "")
{
alert ("Please enter a name!");
return false;
}

// check password length
if (document.forms[0].elements[1].value.length < 6)
{
alert ("Please enter a password of at least 6 characters!");
return false;
}

// check email address

// check age
if (isNaN(document.forms[0].elements[3].value))
{
alert ("Please enter a valid age!");
return false;
}

// check age range
if (parseInt(document.forms[0].elements[3].value) < 1 || parseInt(document.forms[0].elements[3].value) > 99)
{
alert ("Please enter a valid age!");
return false;
}

return true;
}
</script>
</head>

<body>

<form action="someform.cgi" method="post" onSubmit="return validateForm();">

Name:
<br>
<input type="text" name="name" id="name">
<p>

Password:
<br>
<input type="password" name="password" id="password">
<p>

Email address:
<br>
<input type="text" name="email" id="email">
<p>

Age:
<br>
<input type="text" name="age" id="age">
<p>

<input type="submit" value="Submit Form">
</form>

</body>
</html>


This is a simple form, with fields for the user to enter his or her name, a password, an email address and an age value. Before the form is submitted, the "onSubmit" event handler calls the validateForm() function, which checks that:

1. a name is present;

2. the length of the password is 6 or more characters;

3. the email address is in a valid format;

4. the age value is a number, and in the range 1-99.

If any of these tests fail, the validateForm() function will print an error message and return false, which will prevent the form from being submitted. Only after all the validation tests are successfully passed will the function return true and allow the form submission to proceed. In this manner, basic client-side validation can prevent incorrect data from slipping through into your database.

Since this kind of client-side validation is a fairly common task in the Web development world, it's a good idea to encapsulate some of the more common tasks in this context into reusable functions, which can be called as and when needed in your scripts, so as to reduce time and effort spent in this aspect of Web application development. The cleanest way to do this is to build a simple JavaScript form validation object, and add methods to it to validate different types of data. Let's look at that next.


How to do Everything with PHP & MySQL
How to do Everything with PHP & MySQL, the best-selling book by Melonfire, explains how to take full advantage of PHP's built-in support for MySQL and link the results of database queries to Web pages. You'll get full details on PHP programming and MySQL database development, and then you'll learn to use these two cutting-edge technologies together. Easy-to-follow sample applications include a PHP online shopping cart, a MySQL order tracking system, and a PHP/MySQL news publishing system.

Read more, or grab your copy now!


previous page more like this  print this article  next page
 
Search...
 
In trog...
Logging With PHP
Building A Quick-And-Dirty PHP/MySQL Publishing System
Output Buffering With PHP
Date/Time Processing With PHP
Creating Web Calendars With The PEAR Calendar Class
more...
 
In the hitg report...
Crime Scenes
Animal Attraction
Lord Of The Strings
more...
 
In boombox...
Patience - George Michael
Think Tank - Blur
My Private Nation - Train
more...
 
In colophon...
Hostage - Robert Crais
The Dead Heart - Douglas Kennedy
Right As Rain - George Pelecanos
more...
 
In cut!...
American Chai
The Core
Possession
more...
 
Find out how you can use this article on your own Web site!


Copyright © 1998-2018 Melonfire. All rights reserved
Terms and Conditions | Feedback