ACTIVITY:
JAVASCRIPT – CLIENT-SIDE FORM VALIDATION
As we have seen, HTML forms give us the capability of sending information back to the web server.
Perhaps one of the commonest uses of JavaScript is to provide client-side verification of form data - checking the validity of the information that the user is trying to send is before it has travelled back to the server. If there is an error of some kind you can display an error message informing the user of their error and asking them to correct it. Only when all the parts of a form have been filled in correctly do you allow the data to be sent back to the web server.
The following code shows an example of client side validation in action. A user fills out a guest book form on a web page. If the user does not enter their name in the txtName text box then the form has not been filled out correctly. If this is the case, an alert box is displayed asking the user to enter their name on the form before they submit it.
<html>
<head>
<title>Form validation using JavaScript</title>
</head>
<body>
<h3>Please enter any comments you have in our guestbook</h3>
<form name="frmGuestBook" id="frmGuestBook" method=”post” action="mailto:" onSubmit="return checkform()">
<p>Name: <input type="text" name="txtName" id="txtName" size="30"</p>
<p>Email: <input type="text" name="txtEmail" id="txtEmail" size="30"</p>
<br /
Comments:<br /
<textarea name="txtComments" id="txtComments" cols=”40” rows=”10”> </textarea>
<br /
<br /
<input type="submit" value="Submit Comments" name="btnSubmit" id="btnSubmit"
<input type="reset" value="Clear Form" name="btnReset" id="btnReset"
</form>
</body>
<script language="Javascript"
function checkform()
{
if(document.frmGuestBook.txtName.value=="") {
window.alert("Please enter your name in the name box")
return false
}
else{
return true
}
}
</script>
</html>
In a 'real-life' situation you will want to check all parts of a form. For instance, in the example above you would want to check that the user had entered their name, an email address and some sort of comment. To do all these checks you will need to include extra if statements:
<script type = "text/JavaScript"
function checkform()
{
if(document.frmGuestBook.txtName.value=="")
{
window.alert("Please enter your name")
return false
}
if(document.frmGuestBook.txtEmail.value=="")
{
window.alert("Please enter your email address")
return false
}
if(document.frmGuestBook.txtComments.value=="")
{
window.alert("Please enter some comments")
return false
}
else
{
return true
}
}
</script>
If you have a form that requires the user to enter a number (ie. your age) then not only do you need to check that the user has entered something you also need to check that their entry is a number. This can be done using the isNaN function (Is Not aNumber).
You will need to edit the above form to add a text field txtAge.
<script type = "text/JavaScript"
function checkform()
{
if(isNaN(document.frmGuestBook.txtAge.value)==true)
{
window.alert("Please enter a number")
return false
}
}
</script>
If you have a form that requires the user to enter an e-mail address then you need to check that they have entered something and also that the entry is valid.
You will need to edit the above form to add a text field txtEmail.
We can check to see if an e-mail address is valid by checking for the @character within the address. Strings are searched using the searchmethod. This method takes the form stringobj.search(rgexp). If a string does not contain the value you are searching for - in this case the@ sign - then the value -1 (false) is returned.
<script type = "text/JavaScript"
function checkform()
{
if(document.frmGuestBook.txtEmail.value.search('@')==-1 )
{
window.alert("Please enter a valid e-mail address")
return false
}
}
</script>
A - JavaScript - Form ValidationVersion 1
Page 1 of 3