Updated March 28, 2023
Introduction to jQuery Validate
A simple programming approach would require you to add regular expressions (RegEx: predefined characters for a text field ) to your jQuery, to set rules in order to validate your forms. This simple approach becomes troublesome when we have a lot of entries in our form to be validated. So to simplifying client-side validations and making them more easy for the creator, jQuery provides a simple solution, yet again. jQuery provides a plugin, bundled up with rules, that you do not have to re-define for your form elements and events and simplify your validation purpose.
jQuery provides the plugin for validation for a library of rules for validations to help you validate your form elements, by selecting your complete form. All the creator has to do to achieve nearly perfect validations and to use this jQuery validation plugin, is to import the file into your HTML code and the script and use it, simple. The validations and the rules and of course the alerts and messages that will notify the user about a blank field or a wrong entry, every segment is taken care of, by the jQuery Plugin itself, as mentioned above, every rule is bundled up inside the plugin itself.
How JQuery Validate work?
Let us see how this Plugin easy-fy your form Validation and prove to be a “must-have” Plugin?
- The jQuery Validate is a feature provided by jQuery that makes it easier for the creator to validate the user or visitor’s input data while keeping your code free of all the mesh of validation rules from javaScript code.
- It consists of validation functions or in simple words, rules set into groups called “modules”, which makes it possible to fetch them and consider only those rules or functions, which are needed to check or validate a particular field of the entire form.
- It will provide your code validation, dropped in for your existing forms and will make the customization squeezable into your application easily.
jQuery Validate() Format
Calling a jQuery Validate requires prerequisites, before calling the jQuery Validate().
- Calling or adding the required plugin into your HTML and jQuery code.
- Selection of your entire form to be validated.
- Last step is to call your jQuery Validate().
To understand more about the format and how this works, let’s create our first example using this Validate method. In above mentioned the written three points are the broad description of calling and usage of validate().
Example
Step 1: Include the required jQuery Files.
The first step is to add the required jQuery files so that we are able to use our jQuery Validate(). There are two ways, either you can add directly from a source (like CDN) or you can download it in your local machine from a source (jquery.com or Bower or npm) and then add to your code.
Step 2: Create the HTML Form.
The second step is to create your HTML form, let’s say for registrations. We will keep it simple. Just add fields for First Name, Last Name, Email, and Password.
Step 3: Create styling for your form and form fields.
The third step is completely optional but it will make it more interactive for a user.
Step 4: Call the jQuery Validate()
The fourth step is where you will select your form and call the jQuery Validate(). According to the requirement, the creator can also define some of his rules as well in this step. You can define the error messages in your own language, however, you want during this initialization.
From the above-mentioned steps, we have created a simple example. For simplicity, instead of creating separate CSS and JS files, we have added everything in one file.
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Validate Demo</title>
<!-- SRC attribute can be changed according to your preference or location of JS file -->
<script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<style type="text/css">
/* Styles */
* {
box-sizing: border-box;
}
label {
padding: 11px 12px 11px 2px;
display: inline-block;
}
input[type=text], input[type=email], input[type=password], textarea {
border: 2px solid #ccc;
resize: vertical
padding: 12px;
border-radius: 4px;
width: 100%;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
form {
padding: 20px;
background: #2c3e50;
color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
/* Set a style for the submit button */
.registerbtn {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
margin: 10px 0;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
@media screen and (max-width: 560px) {
.row {
margin-top: 0;
width: 100%;
}
}
form .error {
color: #ff0001;
}
</style>
</head>
<body>
<div class="container">
<form class="form" id="MyForm" method="get" action="" name="MyForm">
<fieldset>
<legend>Registration Form</legend>
<div class="row">
<label for="FName">First Name</label>
<input id="FName" name="FName" type="text" minlength="2">
</div>
<div class="row">
<label for="LName">Last Name</label>
<input id="LName" name="LName" type="text">
</div>
<div class="row">
<label for="Email">E-Mail</label>
<input id="Email" type="email" name="Email">
</div>
<div class="row">
<label for="Pwd">Password</label>
<input type="password" name="Pwd" id="Pwd" >
</div>
<div class="row">
<label for="Cmt">Your comment</label>
<textarea id="Cmt" name="Cmt"></textarea>
</div>
<div class="row">
<input class="registerbtn" type="submit" value="Register">
</div>
</fieldset>
</form>
</div>
<script>
$(document).ready(function() {
$("#MyForm").validate({
rules: {
'FName': {
required: true,
minlength: 2
},
'LName': {
required: true,
minlength: 2
},
'Email':{
required: true,
email:true,
},
'Pwd':{
required: true,
},
},
messages: {
'FName': "Please enter a valid First Name.",
'LName': "Please enter a valid Last Name.",
'Email': "Please enter Email in proper format.",
'Pwd': "Please enter a Password",
}
});
});
</script>
</body>
</html>Output:
When we click on the ‘Register’ button, it shows the validation for all the errors the user made, displaying your defined rules(if any)
Recommended Articles
This is a guide to jQuery Validate. Here we discuss the introduction, how this Plugin easy-fy your form validation and prove to be a “must-have” Plugin? and jQuery Validate() Format. You may also have a look at the following articles to learn more –
