Table of Content
Form validation customarily utilized to happen at the host, following the customer had entered all of the needed information and then pressed on the submit button. When the data entered by a customer was wrong or was only lost, the host would need to send all of the information back to the customer and ask that the form is re-submitted with proper info.
What are the methods to validate an HTML5 form?
JavaScript provides a method to confirm the form’s information on the customer’s computer before sending it into the server.
Basic Validation − First of all, the form has to be checked to make sure all the mandatory fields are filled in. It would require only a loop through every field from the form and check for data.
Data Format Validation − Second, the information entered should be checked for proper form and worth. Your code should include appropriate logic to verify the correctness of the information.
How to code a proper form?
<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>
How to validate a form with JavaScript?
First, let’s see how to perform simple form validation. From the above form, we’re calling confirm () to validate data when the onsubmit event is happening. This code shows the implementation of the confirm () 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>
Now we’ll see how we could validate our input data before submitting it to the server.
The next example demonstrates how to confirm an entered email address. An email address should contain a’@’ sign and a dot (.). Additionally, the’@’ shouldn’t be the first part of this email address, and also the previous scatter to at least be a character following the’@’ sign.
<script type = "text/javascript">
<!--
function validateEmail() {
var emailID = document.myForm.EMail.value;
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 )) {
alert("Please enter correct email ID")
document.myForm.EMail.focus() ;
return false;
}
return( true );
}
//-->
</script>
