How to do Form Validation
Introduction
In this tutorial, we will take a look at form validation using jQuery. We will start by discussing the different types of validation you can do with it, and then dive into how to validate your own forms. Form validation is one of the most important parts of web development. It helps the user to know if they have provided all the necessary information and also alerts them in case they provide an invalid input, Form validation is a security measure to ensure that the data entered by the user is valid.
jQuery offers a lot of different plugins that enable form validation. These plugins can validate email, text, number, range and many other types of inputs.
The following are some of the most popular jQuery form validation plugins:
1) Validation Plugin 2) jQuery UI 3) Chosen
4) jQuery Validation Plugin
What is jQuery?
jQuery is a JavaScript library that provides us with many useful tools for manipulating HTML elements on the page. These tools allow us to make changes to the DOM (Document Object Model) of the web page without having to worry about cross-browser compatibility issues. In addition, jQuery makes it easier to write less code and do more complex tasks.
The purpose of form validation is to ensure that users enter data in a way that makes sense. There are many different types of validations that can be applied to forms. These include:
- Required Fields - Ensure that a field is filled out before submitting the form.
- Length - Make sure that a user enters a number, letter, or special character.
- Email - Check if a user entered a valid email address.
- Number Range - Make sure that a value falls between two numbers.
- Date Range - Make sure that the date format is correct.
- Regular Expression - Make sure that a string matches a regular expression.
- Custom Rules - Create custom rules for each input field.
First, we will create a simple HTML form with some text fields and submit button. Then, we will add an event handler for the submit button which validates all of the fields in the form before submitting it to the server. Form validation is a way of making sure that a form is filled out correctly before the user submits it. This protects the user from submitting invalid data which can result in errors and delays. Form validation can be done using JavaScript libraries such as jQuery. Some of the most popular validation types are required, email, number, and URL.
The following example shows how to use jQuery to validate a form:
$('form').validate({ rules: { email: true, url: true, name: true, number_of_words: true }, messages: {}, //optional function for custom messages for each rule type }); |
In this section, we will learn how to validate form fields using jQuery.
Form validation for the clientside using jQuery plugin :
Code:
<html> <head><meta charset="utf-8"> <title>Form Validation using jQuery plugin</title> <!-- jQuery plugin .js files --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"> </script> <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script> <script> $().ready(function () { $("#ValidateForm").validate({ rules: { firstname: "required", lastname: "required", username: { required: true, minlength: 5 }, password: { required: true, minlength: 8 }, confirm_password: { required: true, minlength: 8, equalTo: "#password" }, email: { required: true, email: true }, agree: "required" }, // in 'messages' user have to specify message as per rules messages: { firstname: " Please enter your firstname", lastname: " Please enter your lastname", username: { required: " Please enter a username", minlength: " Your username consist of at least 5 characters" }, password: { required: " Please enter a password", minlength: "Password is too short!! Your password must be consist of at least 8 characters" }, confirm_password: { required: " Please enter a password", minlength: " Your password must be consist of at least 8 characters", equalTo: " Please enter the same password as above" }, agree: "Please accept our policy" } }); }); </script> </head> <body> <form class="cmxform" id="ValidateForm" method="get" action="#" autocomplete="off"> <fieldset> <h2>BI Form Validation </h2> <p> <label for="firstname">Firstname</label> <input id="firstname" name="firstname" type="text"></input> </p> <p> <label for="lastname">Lastname</label> <input id="lastname" name="lastname" type="text"></input> </p> <p> <label for="username">Username</label> <input id="username" name="username" type="text"></input> </p> <p> <label for="password">Password</label> <input id="password" name="password" type="password"></input> </p> <p> <label for="confirm_password">Confirm password</label> <input id="confirm_password" name="confirm_password" type="password"></input> </p> <p><label for="email">Email</label><input id="email" name="email" type="email"></input></p> <p><label for="agree">Please agree to our policy</label> <input id="agree" name="agree" type="checkbox"></input></p> <p><input class="submit" type="submit" value="submit"></p> </fieldset> </form> </body> </html> |
Output
CONCLUSION
Validation is important for the user’s experience with the form. It helps to improve the user interface and saves them from filling in unnecessary fields. The validation process is also essential for web developers as it protects against errors in form submission and data loss. Form validation is a process of checking if the inputted data on a webpage is sufficient to fulfill its intended purpose. Form validation can be done as part of this process or separately, but is generally done at both stages to increase overall compatibility and validity of form submission.