Validate a form in real time with JQuery Validation Plugin and Regex
Validate a form in real time with JQuery Validation Plugin and Regex:
JQuery validation makes the client side validation easier and efficient at the same time while still leaving the room for customization options. JQuery validation can be a good choice if you are building something new or even if you wish to integrate additional functions to the existing application.
The plugin comes bundled with various methods with their respective error messages and also you can write your own methods. The error messages are provided in English language as a default but can be translated into several languages.
The plugin also provides real time validation which means that the form doesn’t needs to be submitted in order for the validation to take place. The validation takes place even while the user fills the form.
Here we will provide you with step by step procedure to validate a form using jquery validation .
At first, we need an html form.So, we have a sample of a simple registration form that needs validation:
<form id="RegisterForm" method="post">
<div class="form-group">
<label id="MobileNumber"></label>
<input id="MobileNumber" name=”MobileNumber” placeholder="Mobile Number" class="form-control" />
</div>
<div class="form-group">
<label id="Password"></label>
<input id="Password" name=”Password” placeholder="Password" class="form-control" />
</div>
<div class="form-group">
<label id="ConformPassword"></label>
<input id="ConformPassword" name=”ConformPassword” placeholder="Conform Password" class="form-control" />
</div>
<div class="form-group">
<label>
<input id="TermCondition" name=”TermCondition” />I accept <a href="/term-and-condition">Terms and Conditions</a></label>
</div>
<button type="submit" class="btn btn-green ful-width">Submit <i class="far fa-edit"></i></button>
</form>
<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 src="~/js/RegisterForm.js">
jQuery.validator.setDefaults({
success: "valid"
});
$("#RegisterForm").validate({
submitHandler: function(form) {
$(form).ajaxSubmit();
}
})
</script>
In the form we need to provide Id and name for each field in the form which represents each field in the JS. At the button we have provided the link for validate.min.js and an external link with validation methods which is required for JQuery validation.The link of the files is necessary and you can get the link online.
For the files: JQuey Files
Also at the button we have a js function which take the id – #RegisterForm which is the form ID and only submits the form when the fields are valid.
After the completion of the form now we create a js file where we will add our validation code. In our case we have created a file name RegisterForm.js. for which the code is provided below:
$.validator.addMethod("regex", function(value, element, param) {
return this.optional(element) ||
value.match(typeof param == "string" ? new RegExp(param) : param);
}); // Add method to plugin for processing regex……………
$("#RegisterForm").validate({
rules: {
// simple rules……
MobileNumber: {
required: true,
digits: true,
minlength: 10,
maxlength: 10
},
Password: {
required: true,
regex: “ /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/”
//regex for passsord strength……
},
ConformPassword: {
required: true,
equalTo: "#Password" //match value with preentered password field…..
},
TermCondition: {
required: true
}
},
messages: { //error messages………
TermCondition: {
required: "Term and Condition need to accept"
},
Password: {
regex: "The password must be eight character long and must contain one uppercase, one lower case letter and special character"
}
},
submitHandler: function(form) {
$(form).ajaxSubmit();
}
});
The $.validator.addMethod() method function at the top is for adding the regex method to the plugin which is provided at the password field our JS which returns true when the entered value matches the regex else return false. In this way we can add additional methods to the plugin as per our requirement.
The .validate() function is divided into rules and messages section where we have provided many rules which are either true or false. If the rules are false then they are accompanied with the respective error messages that is provided itself by the jquery plugin or we can even define our own error message in the messages section like given below.
All the entities in the .validate() function needs to be separated with commas as given above.
Also Read: Disallow insertion of special characters in a form using JS
Now let’s see how this validation works with an output:
So Here we can see our validation has worked with different error messages on the basis of value provided into the fields.
On the password field we can see that the “regex” method that we added is working and the same message that we provided in the messages section has been displayed.
The good thing about this validation plugin is that the fields are validated in real time even before we submit the form. So, it is easier, efficient and customizable according to the need of the developer.
Also Read: Git Commands you must know
TOP PROGRAMMING LANGUAGE TO LEARN IN 2019
