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
2
: 11905 At:- 8/14/2017 3:18:10 PM
jQuery javascript jQuery-validation-plugin







4 Answers
profileImage 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.

5
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


profileImage 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.

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


profileImage 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

2
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


profileImage 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;
      }

    });
});

 

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






Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use