Knowledge Base Articles » KB100223: Client-side Form Verification in JavaScript.
When a client enters information into an online form, sometimes it is very important that certain fields be filled out on that form. For example, you may need the client's email address so that you can send requested information. Adding code to your ASP page that will check a field to see if it has been filled out is very easy. This is usually done with the onSubmit event which calls a Javascript function that does the checking.
Below is the code for a form that requests your full name, email address and phone number. Note that the phone number is marked as optional, but that the full name and email address are marked as required. Therefore, you will check to see if the two required fields are empty, or not. Courtesy to the client dictates that you tell them on the form which fields are required and which are optional.
<html>
<head>
<title>Test Form</title>
<script type="text/javascript">
// checksubmit() has to be a function, not a subroutine, because the
// onSubmit attribute in the form tag (in green text below) which calls
// this function requires a Boolean return value of true or false
// if the return is true, the form is automatically submitted without
// the need to call document.formname.submit()
// if the return is false, the form submission will be aborted and the client is sent
// back to the form to fill out the missing field
function checksubmit()
{
// check to see if name field is empty
// note that you use the name of the form and the field
if (document.formname.fullname.value == "")
{
// tell client that you need the name
alert("Please enter your full name")
// send the cursor to the fullname field
document.formname.fullname.focus()
// field is empty, so return false to abort the form submission
// the client is returned to the form
return false
}
// check to see if email address field is empty
if (document.formname.emailaddress.value == "")
{
alert("Please enter your email address")
document.formname.emailaddress.focus()
return false
}
// if both fields are filled out, return true
// this triggers the form submission
return true
}
</script>
</head>
<body onLoad="document.formname.fullname.focus()">
If you wish to receive information about upgrades to dgCharge,
please fill out this form.
<br>
<form method="post" name="formname" action="nextpage"
onSubmit="return checksubmit()">
Full Name (required) <input type="text" name="fullname" size="30">
<br>
EmailAddress (required) <input type="text" name="emailaddress" size="30">
<br>
Phone Number (optional) <input type="text" name="phonenumber" size="30">
<br>
<input type="submit" name="submitbtn" value="Submit">
<input type="reset" value="Clear">
</form>
</body>
</html>
As you can see, you use an if statement to determine if the required field contains the empty string "". If this tests to be true, then that field was not filled out by the client.
Click here to view and test this form.
However, even if a value has been entered in the field, it may not be useful. Fortunately, you can perform a more detailed check that suits the purpose of your particular form. You could required each character entered into a certain field to be an integer. A simple way to check for this is to use the isNaN(TestValue) function which returns true if the TestValue is not a number.
if(isNaN(document.myform.phone.value) == true)
{
alert("Please enter a correct phone number")
document.myform.phone.focus()
return false
}
As another example, you could check the syntax of the email address. A correct email address will have a beginning string, followed by an @, a middle string, a dot . and an ending string, such as:
info@devguru.com
So, in the function checksubmit() you could check the email address syntax by determining if there is both an @ and a dot. To accomplish this, you can use the split() and indexOf() methods.
function checksubmit()
{
// check to see if email address field is of valid syntax
substremail = document.formname.emailaddress.value.split("@")
if (substremail.length > 1)
{
index = substremail[1].indexOf(".")
if (index == -1)
{
document.formname.emailaddress.focus()
return false
}
else
{
return true
}
}
else
{
document.formname.emailaddress.focus()
return false
}
}
Checking to see if the required fields have been filled out, and filled out correctly, benefits both you and the client. It ensures that the client gives you at least the minimum information that you need to meet the client's needs.
