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
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.
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.
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
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;
}
});
});
Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly