OK, so today we are going to create a simple Form Validator Script using JavaScript that would not let a HTML form be submitted unless all required field are filled in. JavaScript is widely used for this purpose as it does not need server processing hence no form sending and pageload is required.
When you are using data submission via form on your website there are a few other methods that you can employ other than JavaScript; first, not to use validation at all (NOT RECOMMENDED), second, to use validation in the script and make it show appropriate message (need pageload).
So definitely we’ll be using JavaScript and you should in most cases, too. Let’s kick off guys!
Now before we begin I want to tell you one thing, we will only be checking (validating) if all the required fields are filled or not and NOT whether what is filled in is acceptable. Of course we can use JavaScript to validate whether, let’s say the filled email address is appropriate or not but that would be the topic of some future posts.
So for now we just need to check all the required fields of the form to see if they are filled in or not. Suppose if we have a form (named "form") with four Input Boxes (namely ‘Name’,, ‘Address’, ‘Email’, ’PhoneNumber’), we can use the following piece of JavaScript code to check them:
if(form.Name.value=='')
alert("Name field is required. Please fill it in.");
if(form.Address.value=='')
alert("Address field is required. Please fill it in.");
if(form.Email.value=='')
alert("Email field is required. Please fill it in.");
if(form.PhoneNumber.value=='')
alert("Phone Number field is required. Please fill it in.");
Since form elements reside between the <form></form>
tags, we would wrap the above code as a JavaScript function and make the form
invoke it when ‘Submit’ button is pressed.
<html>
<head>
<title>JavaScript Form Validation Script</title>
<script language="JavaScript" type="text/JavaScript">
function checkForm(thisform)
{
if(thisform.Name.value=='')
{
alert("Name field is required. Please fill it in.");
return false;
}
if(thisform.Address.value=='')
{
alert("Address field is required. Please fill it in.");
return false;
}
if(thisform.Email.value=='')
{
alert("Email field is required. Please fill it in.");
return false;
}
if(thisform.PhoneNumber.value=='')
{
alert("Phone Number field is required. Please fill it in.");
return false;
}
//if all is OK submit the form
thisform.submit();
}
</script>
</head>
<body>
<form name="form1" id="form1" method="post" action="--SCRIPT.PHP--">
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="121">Name</td>
<td width="379"><input name="Name" type="text" id="Name" /></td>
</tr>
<tr>
<td>Address</td>
<td><input name="Address" type="text" id="Address" /></td>
</tr>
<tr>
<td>Email</td>
<td><input name="Email" type="text" id="Email" /></td>
</tr>
<tr>
<td>Phone Number</td>
<td><input name="PhoneNumber" type="text" id="PhoneNumber" /></td>
</tr>
<tr>
<!--This is NOT a Submit (type) Button which automatically submits the form on click, rather we are using
Simple Button and the JavaScript code to submit it -->
<td><input name="Submit" type="button" id="Submit" onclick="checkForm(this.form)" value="Submit" /></td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
In the above code, instead of hard coding the form’s name (or object name) in the function ‘checkForm’ we are passing it from the form. When any form elements is found to be empty respective message is shown via the Message Box (using alert() ).
To use the above code (JavaScript function) with your existing forms, you’d need to make some changes to the function regarding the name and number of form elements you want to validate. You’d also have to change the Message (alert) shown, if required.
One last thing, if the user has turned off Java Script or their browser does not support it, form would not be validated and you might end up receiving half-filled information for this scenario you could employ double validation using both JavaScript and server-side (in the script data is getting sent to). Of course it’s very unlikely but you should be ready for everything.
Previous Posts: