The first part of the form is the form tag:
<form name="contact_form" method="post"
action="/cgi-bin/articles/development/
javascript/form-validation-with-javascript/contact_simple.cgi"
onsubmit="return validate_form ( );">
The form is given a name of "contact_form". This is so that we can reference the form by name from our JavaScript validation function.
The form uses the post method to send the data off to a dummy CGI script on ELATED.com’s server that thanks the user. In reality, you would of course send the data to your own CGI script, ASP page, etc. (e.g. a form mailer).
Finally, the form tag includes an onsubmit attribute to call our JavaScript validation function, validate_form(), when the “Send Details” button is pressed. The return allows us to return the value true or false from our function to the browser, where true means “carry on and send the form to the server”, and false means “don’t send the form”. This means that we can prevent the form from being sent if the user hasn’t filled it in properly.
The rest of the form prompts the user to enter their name into a form field called contact_name, and adds a “Send Details” submit button:
<h1>Please Enter Your Name</h1>
<p>Your Name: <input type="text" name="contact_name"></p>
<p><input type="submit" name="send" value="Send Details"></p>
</form>
Now let’s take a look at the JavaScript form validation function that does the actual work of checking our form.
The validate_form() function
The form validation function, validate_form(), is embedded in the head element near the top of the page:
<script type="text/javascript">
<!--
function validate_form ( )
{
valid = true;
if ( document.contact_form.contact_name.value == "" )
{
alert ( "Please fill in the 'Your Name' box." );
valid = false;
}
return valid;
}
//-->
</script>
The first line (<script type="text/javascript">) tells the browser that we are writing some JavaScript, and the HTML comment (<!--) in the second line hides the script from older browsers that don’t understand JavaScript.
Next we start our validate_form() function, then set a variable called valid to the value true:
function validate_form ( )
{
valid = true;
We use this valid variable to keep track of whether our form has been filled out correctly. If one of our checks fails, we’ll set valid to false so that the form won’t be sent.
The next 5 lines check the value of our contact_name field to make sure it has been filled in:
if ( document.contact_form.contact_name.value == "" )
{
alert ( "Please fill in the 'Your Name' box." );
valid = false;
}
If the field is empty, the user is warned with an alert box, and the variable valid is set to false.
Next, we return the value of our valid variable to the onSubmit event handler (described above). If the value is true then the form will be sent to the server; if it’s false then the form will not be sent:
return valid;
Finally, we finish our validate_form() function with a closing brace, and end our HTML comment and script element:
}
//-->
</script>
