« Hiding Links With PHP and Counting Clicks with MySQL |
Mounting NTFS Partitions in Linux »
JavaScript Validation for HTML Forms
One of the most frustrating things with using forms on a site is getting back bad information in your results. Probably the most common instance is when a user enters a bad email address, such as webmaster#studgecom. We can utilize JavaScript to check for composition error such as this and to make sure that certain, required fields are filled in.
First, we are going to write up a simple form that requests a user's name, email address and favorite color. Here is the essence of the form:
<html>
<head>
<title>Form for JavaScript Validation - 1st version</title>
</head>
<body>
<form method="POST" action="jstest.php">
Name:<input type="text" name="name" /><br />
Email address:<input type="text" name="email" /><br />
Favorite color:<input type="text" name="color" /><br />
<input type="submit" name="submit" value="Submit" />
</form>
</body>
</html>You can try it here. It sends the form data to a PHP script named jstest.php. This script merely displays the information that the user put into the form. Here is code for it:
<?php
echo "Thank you " . $_POST['name'] . "<br />";
echo "We will contact you at " . $_POST['email'] .
" regarding the color " . $_POST['color'] . "";
?>As it is written now, the form provides no sort of validation and the user can submit anything or nothing in the availabe fields. So we need to write a JavaScript script to handle the validation. We will require the user to input their name, email address and favorite color. The user must also input the email address in a valid format. We will call this file jstest.js and here is what it looks like:
function validate_required(field,alerttxt) {
with (field) {
if (value==null||value=="") {
alert(alerttxt);
return false;
}
else {
return true;
}
}
}
function validate_email(field,alerttxt) {
with (field) {
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2) {
alert(alerttxt);
return false;
} else {
return true;
}
}
}
function validate_form(thisform) {
with (thisform) {
if (validate_required(name,"Please specify your name!")==false) {
name.focus();
return false;
}
if (validate_required(email,"Email must be filled out!")==false) {
email.focus();
return false;
}
if (validate_email(email,"Not a valid e-mail address!")==false) {
email.focus();
return false;
}
if (validate_required(color,"Forgot favorite color!")==false) {
color.focus();
return false;
}
}
}Now we have a script to validate the form, but it does nothing until we implement it into the form's code. Here is the full form code (sans styling):
<html>
<head>
<script type="text/javascript" src="jstest.js"></script>
</head>
<body>
<form method="POST"
onsubmit="return validate_form(this)" action="jstest.php">
Name:<input type="text" name="name" /><br />
Email address:<input type="text" name="email" /><br />
Favorite color:<input type="text" name="color" /><br />
<input type="submit" name="Submit" value="Submit" />
</form>
</body>
</html>You can try the finished, with validation, here. You should be able to adapt the above code to your specific form needs.
Topics: (X)HTML, JavaScript, PHP, Web Development
Share: del.icio.us | digg | reddit
good
This is a handy script. I chose this one because it doesn’t dump pages of code in the header.
However, it doesn’t extend to validating radio buttons or drop-down lists, which would be a handy addition.
-Lee
when i click submit button ,i want to show ” you have successfully sent your quiry” if i filled form correctly.
You just need to add an alert to the end of the last function, replace the
validate_formfunction with the following code: