How to validate jQuery form validation on button click?

I am using jQuery validation plugin in my form, but I am not able to show validation errors on button click using the above plugin, in my form.

Here is my code

<form id="ConnectionWiseForm">
                    <div class="row">
                        <div>
                            <div class="col-lg-2">Username</div>
                            <div class="col-lg-10"><input type="text" id="username" name="username" class="form-control" required /></div>
                        </div>
                        <div class="clearfix"></div><br />
                        <div>
                            <div class="col-lg-2">Password</div>
                            <div class="col-lg-10"><input type="text" id="password" name="password" class="form-control" required /></div>
                        </div>
                    </div>
                    <div class="clearfix"></div><br />
                    <div class="row">
                        <div class="col-lg-2">Company URL</div>
                        <div class="col-lg-10"><input type="text" value="" class="form-control" id="CompanyURL" name="CompanyURL" placeholder="Enter Company url"  required/></div>
                    </div>
                   </form>

and here is the jQuery function

$("#ConnectionWiseForm").validate({
                    // Specify validation rules
                    rules: {
                        // The key name on the left side is the name attribute
                        // of an input field. Validation rules are defined
                        // on the right side
                        username: "required",
                        password: "required",
                        CompanyURL: "required",

                    },

                });


  $(".save-button").on('click', function () {
              //want to test validation here, how to achieve it
});

as commented in above jQuery code, I want to check jQuery validation form on button click, how to do this?

thanks

Asked by:- jaya

: 11905 At:- 8/14/2017 3:18:10 PM

jQuery javascript jQuery-validation-plugin

add comment to question

4 Answers

Answered by:- jaiprakash

You can validate jQuery form using button click using .valid() method, so you code will be something like this

//This is used to initialize the validation on form and applying rules,conditions
$("#ConnectionWiseForm").validate({
                    // Specify validation rules
                    rules: {
                        // The key name on the left side is the name attribute
                        // of an input field. Validation rules are defined
                        // on the right side
                        username: "required",
                        password: "required",
                        CompanyURL: "required",

                    },

                });


  $(".save-button").on('click', function () {
           //This will check validation of form depending on rules
           if($("#ConnectionWiseForm").valid())
           {
            //Do something here
           }
});

that's it, it will work.

.validate() - to initialize the plugin (with options) once on DOM ready.

.valid() - to check validation state (boolean value) or to trigger a validation test on the form at any time.

At:- 8/15/2017 7:45:45 AM Updated at:- 8/15/2017 7:48:09 AM

Thanks, really helpful answer, works as needed. 0

By : pika - at :- 1/24/2022 9:32:17 AM

jQuery validate is an excellent plugin to validate forms easily, but I will still prefer plain JS over it. 0

By : vikas_jk - at :- 9/23/2022 3:54:20 PM

comment to above answer

Answered by:- manish

In jQuery Validate plugin .validate() only initializes the plugin, to check validation on button, you cna use the below sample jQuery code

$('#btn').on('click', function() {
    $("#form1").valid();
});

Where #btn is id of form submitting button and #form1 is id of the form, here is how it works.

.validate() - to initialize the plugin (with options) once on DOM ready

.valid() - to check validation state (boolean value) or to trigger a validation test on the form at any time.

Note: if you will place <input type="submit" /> button inside your HTML form, you don't need to create jQuery code to check form validation as jQuery validate will handle it by itself and show error messages if needed.

At:- 9/7/2018 1:01:21 PM

comment to above answer

Answered by:- pika

Here is the sample demo code to validate form on submit or button click.

$(document).ready(function() {
    $("#form1").validate({
        rules: {
            field1: "required"
        },
        messages: {
            field1: "Please specify your name"
        }
    })
});

<form id="form1" name="form1">
     Field 1: <input id="field1" type="text" class="required">
    <input id="btn" type="submit" value="Validate">
</form>

Thanks

At:- 1/24/2022 9:33:09 AM

Thanks, yes, using jQuery validate is an easy way to do form validation on button click. 0

By : jaya - at :- 6/13/2022 7:45:14 AM

comment to above answer

Answered by:- bhanu

Just to add simple demo of jQuery validate on button click:

<form id="formMain" name="formMain">
     Name: <input id="Name" type="text" class="required">
    <input id="btn" type="submit" value="Validate">
</form>


$(document).ready(function() {
    //jquery validate to check validation on click
    $("#formMain").validate({
        rules: {
            Name: "required"
        },
        messages: {
            Name: "Name is required"
        }
    });

    $("#btn").on('click',function(){
       
      if($("#formMain").valid())
      {
         //yes form is valid
      }
      else
      {
            //do something
            return;
      }

    });
});

At:- 4/4/2021 3:41:48 PM