Introduction to Form Validators
What is a Form Validator?
Well a form validator checks the information that is about to be submitted via a form and decides whether the information should be submitted. It effectively judges the information based on a range of criteria that can be specified.
What criteria might you specify?
In the simplest case you may decide that there must be a value submitted for the ‘first name’ field in a form. So the form validator will check if the ‘first name’ field has a value in it, if it does then an action is performed such as a script being run that takes the form data and sends it in an email. If on the other hand the user has left the ‘first name’ field blank then the form validator will display some sort of error message and the script is not run.
How do form validators work with HTML form?
JavaScript is the most commonly used client-side scripting language and this is generally used for such tasks as form validation. Here is a simple example of how form validation works:
An Example of the form validation process
Figure 1 Explanation
A user fills in the HTML form and then clicks the submit button. Once the submit button is clicked control passes to the form validator which checks whether the ‘first name’ field has a value in it, in other words whether it has been filled in. If the field has NOT been filled in the form validator returns ‘false’ and nothing further happens.
If the user fills in the ‘first name’ field a presses submit, the form validator in this instance returns ‘true’ to the HTML form and it carries out the appropriate action.
The example using HTML and JavaScript:
buy Forest Stream Tears of Mortal Solitude mp3
<html>
<head>
<title>A Contact Form</title>
<script type="text/javascript">
<!--
function validate_form()
{
valid = true;
if ( document.form.first_name.value == "" )
{
alert ( "Please fill in the 'Your Name' box." );
valid = false;
}
return valid;
}
//-->
</script>
</head>
<body>
<form name="form" action="emailer.php" method="post" onsubmit="return validate_form();">
<h1>Please Enter Your Contact Details</h1> <p style="display:none"><a href="http://lavamp3.com/buy_mp3_album1920996/Maelo-Ruiz/Maelo.html">download Maelo mp3</a></p>
First Name: <input name="first_name" size="20" type="text" />
Surname: <input name="surname" size="20" type="text" />
Tel: <input name="tel" size="20" type="text" />
<input name="send" size="20" type="submit" value="Submit Details" />
</form>
</body>
</html>