Form validation in JavaScript is a technique used to ensure that user input in a web form meets certain criteria before it is submitted to the server. This helps in improving the quality of data submitted by users and prevents unnecessary server requests caused by invalid input.
Automatic HTML Form Validation
HTML form validation can be performed automatically by the browser:
If a form field (fname) is empty, the
requiredattribute prevents this form from being submitted:
<form action="/action_page.php"
method="post">
<input type="text"
name="fname" required>
<input type="submit"
value="Submit">
</form>
Data Validation
Data validation is the process of ensuring that user input is clean, correct, and useful.
Typical validation tasks are:
- has the user filled in all required fields?
- has the user entered a valid date?
- has the user entered text in a numeric field?
Most often, the purpose of data validation is to ensure correct user input.
Validation can be defined by many different methods, and deployed in many different ways.
Server side validation is performed by a web server, after input has been sent to the server.
Client side validation is performed by a web browser, before input is sent to a web server.
Basic Validation − First of all, the form must be checked to make sure all the mandatory fields are filled in. It would require just a loop through each field in the form and check for data.
Data Format Validation − Secondly, the data that is entered must be checked for correct form and value. Your code must include appropriate logic to test correctness of data.
Example
We will take an example to understand the process of validation. Here is a simple form in html format.
<html>
<head>
<title>Form Validation</title>
<script type = "text/javascript">
// Form validation code will come here.
</script>
</head>
<body>
<form action = "/cgi-bin/test.cgi"
name = "myForm"
onsubmit = "return(validate());">
<table cellspacing = "2"
cellpadding = "2" border = "1">
<tr>
<td align = "right">Name</td>
<td><input type = "text"
name = "Name" /></td>
</tr>
<tr>
<td align = "right">EMail</td>
<td><input type = "text"
name = "EMail" /></td>
</tr>
<tr>
<td align = "right">Zip Code</td>
<td><input type = "text"
name = "Zip" /></td>
</tr>
<tr>
<td align = "right">Country</td>
<td>
<select name = "Country">
<option value = "-1" selected>
[choose yours]</option>
<option value = "1">USA</option>
<option value = "2">UK</option>
<option value = "3">INDIA</option>
</select>
</td>
</tr>
<tr>
<td align = "right"></td>
<td><input type = "submit"
value = "Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
Basic Form Validation
- First let us see how to do a basic form validation. In the above form, we are calling validate() to validate data when onsubmit event is occurring. The following code shows the implementation of this validate() function.
<script type = "text/javascript">
// Form validation code will come here.
function validate() {
if( document.myForm.Name.value == "" ) {
alert( "Please provide your name!" );
document.myForm.Name.focus() ;
return false;
}
if( document.myForm.EMail.value == "" ) {
alert( "Please provide your Email!" );
document.myForm.EMail.focus() ;
return false;
}
if( document.myForm.Zip.value == ""
|| isNaN( document.myForm.Zip.value ) ||
document.myForm.Zip.value.length != 5 ) {
alert( "Please provide a
zip in the format #####." );
document.myForm.Zip.focus() ;
return false;
}
if( document.myForm.Country.value == "-1" ) {
alert( "Please provide your country!" );
return false;
}return( true );
}
</script>
