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






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

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





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