JQUERY Validate using different button on same form

Question

One is notes div

Second is Charges div

When I click on notes submit than it's validate only notes div data like:
txtTitle, txtNotes, txtDate.

When I click on charges submit than it's validate only charges div data like:
chkSetup, chkDev, chkOther, chkPackaging.

My code is:

$('#btnNotesSubmit').click(function () {
   $('#form1').validate({
    rules: {
       txtTitle : "required,"        
       txtNotes : "required,"        
       txtDate : "required,"        
    },

    errorClass: 'help-block',
    errorElement: 'span',
    highlight: function (element, errorClass, validClass) {
    $(element).parents('.form-group').removeClass('has-success').addClass('has-error');
    },
    unhighlight: function (element, errorClass, validClass) {
    $(element).parents('.form-group').removeClass('has-error').addClass('has-success');
    },
    submitHandler: function () {
           alert('notes data insert function');
      }
   });


$('#btnChargesSubmit').click(function () {
   $('#form1').validate({
    rules: {
        checkbox validate data 
    },

    errorClass: 'help-block',
    errorElement: 'span',
    highlight: function (element, errorClass, validClass) {
    $(element).parents('.form-group').removeClass('has-success').addClass('has-error');
    },
    unhighlight: function (element, errorClass, validClass) {
    $(element).parents('.form-group').removeClass('has-error').addClass('has-success');
    },
    submitHandler: function () {
           alert('charges data insert function');
      }
   });

you should also define rules for charges – Rashid Javed Aug 16 '16 at 07:01 — Rashid Javed, Aug 16 '16 at 07:01
how is it? any suggestion? – Ketul Soni Aug 16 '16 at 07:02 — Ketul Soni, Aug 16 '16 at 07:02

score 0 · Answer 1 · edited May 23 '17 at 10:33

You misunderstand the purpose of the .validate() method; there is no need to put it within a click handler. The .validate() method is only for initializing the plugin on your form, and it can only be called once. Refer to this.

Also, we cannot see your HTML, but your two forms (div's) should be contained within two different <form> containers since they contain different input elements, different rules, and separate buttons.

Initialize them both first...

$('#form1').validate({  // <- initialize the plugin on FORM 1
    rules: { // rules for form 1
       txtTitle : "required,"        
       txtNotes : "required,"        
       txtDate : "required,"        
    }, 
    ....
});

$('#form2').validate({  // <- initialize the plugin on FORM 2
    rules: { // rules for form 2
        ....
    },
    ....
});

Then since each button is a type="button", you must use a click handler to test each form by triggering the .valid() method...

$('#btnNotesSubmit').on('click', function () {
    $('#form1').valid();  // <- TEST FORM 1
});

$('#btnChargesSubmit').on('click', function () {
    $('#form2').valid();  // <- TEST FORM 2
});

However, if you simply change type="button" into type="submit", you will not need these custom click handlers at all since the plugin will capture this click event automatically.

score -1 · Answer 2 · answered Aug 16 '16 at 07:07

-1

You can try this

$('#btnChargesSubmit').click(function () {
   $('#form1').validate({
    rules: {
       chkSetup : "required,"        
       chkDev : "required,"        
       chkPackaging: "required,"  
    },

    errorClass: 'help-block',
    errorElement: 'span',
    highlight: function (element, errorClass, validClass) {
    $(element).parents('.form-group').removeClass('has-success').addClass('has-error');
    },
    unhighlight: function (element, errorClass, validClass) {
    $(element).parents('.form-group').removeClass('has-error').addClass('has-success');
    },
    submitHandler: function () {
           alert('charges data insert function');
      }
   });

answered Aug 16 '16 at 07:07

Rashid Javed

62
9

You can also define other rules like email etc – Rashid Javed Aug 16 '16 at 07:08
In my page all – Ketul Soni Aug 16 '16 at 07:16
I could not understand – Rashid Javed Aug 16 '16 at 07:18

JQUERY Validate using different button on same form

2 Answers2