ttmind

Main Navigation

ttmind
  • jim-jams
  • Tech
  • Positive
Login

Login

Facebook Google

OR

Remember me Forgot password?

Don't have account? Signup here.

Sort by Categorys

.Net

PHP

Java

JavaScript

Database

Server

Client Side

Tools

Artificial Intelligence

Cloud

Hybrid Development

Event

Smart City

Education

Security

Scrum

Digital Marketing

APP Development

Business

Internet

Simulation

Art

Network

Microservices

Architecture

Technology

Leadership

    Top Articles

  • How Does Social Media Bring People Together?
    TTMind Author
  • How to read appSettings JSON from Class Library in ASP.NET Core
    Anil Shrestha
  • Printing Support In Asp.Net Core
    TTMind Author
  • HOW TO EXTRACT TEXT FROM IMAGE USING JAVASCRIPT (OCR with Tesseract.js)?
    Prakash Pokhrel
  • Images Upload REST API using ASP.NET Core
    Prakash Pokhrel
  • Related Topic

  • HOW TO EXTRACT TEXT FROM IMAGE USING JAVASCRIPT (OCR with Tesseract.js)?
  • Generate PDF from HTML with CSS by using JavaScript and JQuery
  • HOW TO EXTRACT TEXT FROM IMAGE USING Angular(OCR with Tesseract.js / OCR using Angular)?
  • Angular 7: Create new project using Angular 7
  • How to use the bootstrap(ngx-bootstrap) 4 in angular 7?
  • Tech
  • About Us
  • Contact Us
  • TechHelp
  • PositiveHelp
  • Jim-Jams Help
  • Terms & Conditions

© Copyright ttmind.com

Main Content

Validate a form in real time with JQuery Validation Plugin and Regex

JavaScript Jquery about 6 years ago || 5/12/2019 || 8.8 K View

  • Hide

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

                   Biggest Issues in IT today

  • 0
  • 0
  • 0
    • Facebook
    • Twitter
    • Google +
    • LinkedIn

About author

Binod  Bhandari

Binod Bhandari

Life is not just about thrieving but all about living.

Reset Your Password
Enter your email address that you used to register. We'll send you an email with your username and a link to reset your password.

Quick Survey