A web application is generally interactive, be it in the case of registration, surveys, or feedback. The application should also be smart enough to validate the information being provided by the user. JavaScript Form Validation does precisely this.
Form validation, as the name proposes, checks, if the information provided, is accurate or not. This can be done on the server-side; however, the process takes longer. JavaScript facilitates form validation on the client-side before sending it over to the server, thus improving the processing speed.
Form validation typically involves two functions:
- Basic Validation: This warrants that all the mandatory fields are filled. It would require just a loop through each field in the form and check for data.
- Data Format Validation: Data validation checks the data for its correctness. Your code must include appropriate logic to test the accuracy of data.
Now that you know why form validation is necessary let us take the plunge and look into the process of creating a simple form and validating the information.
The demo use case involves the basic validation of the email and passwords fields, i.e., it checks if the information is provided by the user or not. For that, we’ve created a form using the <form> tag by HTML. Once the form is submitted, a welcome message is displayed.
<form name="myForm" action="message.html" onsubmit="return(validate());">
<input type="text" placeholder="Email" name="EMail" /><br>
<input type="text" placeholder = "Password" name="Password" /><br>
<button type="submit">Submit</button>
The <form> tag has attributes like the name, which specifies the name of the form, and action, that specifies the action to be performed when submitted. And submit, which specifies the function that is being called to validate the form.
Within the input tag, the name of the field along with its type and a placeholder is mentioned. The input fields for email and password are created. Finally, a button is created for the form submission.
function Validate(){
if(document.myForm.EMail.value ==""){
alert("Please provide your Email ID");
document.myForm.EMail.focus()
return false
}else if(document.myForm.Password.value ==""){
alert("Please provide your Password");
document.myForm.Password.focus()
return false
}
else {
return true
}
}
The validate() method is a vital part of the program. It first checks if the email field is empty. If yes, it alerts the user and focuses on the email field for the input. It then checks if the password field is filled. If not, it alerts the user regarding the same. Both the above cases return false and terminate the function. However, if the user fills in their credentials, the function returns true.
Please note that if the function returns false, the form does not get submitted.
The message.html is a file displaying a simple welcome message. Here’s the code for it.
<html>
<head>
<title>Form Validation</title>
<script type = "text/JavaScript">
</script>
</head>
<body>
<h1>Hello there! Welcome :) </h1>
</body>
</html>
This is the output of the code if no information is provided:
JavaScript Form Validation
This is the output if the email field is filled without the password field:
JavaScript Form Validation
This is the output of the code if both the fields are provided:
JavaScript Form Validation
Master the complete JavaScript fundamentals, jQuery, Ajax, and more with the Javascript Certification Training Course. Check out the course preview!
Next Steps
If you want to learn more about JavaScript, certification is highly recommended and could act as a catalyst for boosting your career as a coder. Simplilearn's JavaScript Certification Training course helps you master the JavaScript programming language with the help of an all-inclusive training program that includes JavaScript fundamentals, jQuery, Ajax, and more. You will also have the opportunity to apply your skills by building a real-time chat application.
If you have any questions or feedback, let us know in the comments section. Our experts will get back to you immediately!
