jQuery Validation plugin with two submit buttons? -


i have 1 form around 50 fields , 2 submit buttons, "save" , "save & submit". if user clicks "save", validate values, eg. field1, field2. when user clicks "save & submit" button, should validate 50 fields , submit.

<form id="myform">     <input type="text" name="field1" />     <br/>     <input type="text" name="field2" />     <br/>     <input type="text" name="field3" />     <br/>     <input type="text" name="field4" />     <br/>     <input type="submit" id="button1" value="save" />     <input type="submit" id="button2" value="submit" /> </form>   $(document).ready(function () {      $('#button1').click(function(){                   $("#myform").validate({                          rules: {                 field1: {                     required: true                                          },                 field2: {                     required: true                                         }             },             submithandler: function (form) { // demo                     alert("data saved");             }         });     });       $('#button2').click(function(){         $("#myform").validate({                          rules: {                 field1: {                     required: true                                           },                 field2: {                     required: true                                            },                 field3: {                     required: true                                          },                 field4: {                     required: true                                           }             },             submithandler: function (form) { // demo                 alert("data submited");             }         });     });  }); 

i have created jsfiddle this: example test

your code...

$('#button1').click(function(){                  $("#myform").validate({         ....     });              });   $('#button2').click(function(){     $("#myform").validate({         ....     }); }); 

you absolutely cannot this:

1) cannot call .validate() method more once on same form. subsequent calls ignored.

2) should not put .validate() method inside of click handler. .validate() method initialization method of plugin , gets called once within dom ready event handler. after proper initialization, submit button click captured automatically plugin.


html markup , click handlers:

this plugin automatically captures click of input type="submit" , button type="submit" elements , initiates validation/submission.

so if need control happens 2 different buttons, first need change buttons input type="button" or button type="button" elements.

then can use click() handlers dynamically change rules .rules() methods per button clicked. see the .rules() methods documentation.

use .submit() programmatically submit. in other words, trigger validation test , attempt submit form if valid... same if had submit button.

use .valid() programmatically test form. in other words, trigger validation test not submit form if valid.


example:

$(document).ready(function () {      $('#myform').validate({  // initialize plugin on form         // options, rules and/or callbacks     });      //  important:  buttons not type="submit"      $('#button1').on('click', function(){  // capture click                    $('#myfield').rules('add', {  // dynamically declare rules             required: true,             email: true         });         $('#myotherfield').rules('remove'); // remove other rules.         // '.rules()' call, etc.         $('#myform').valid();  // trigger validation & not submit             });       $('#button2').on('click', function(){  // capture click         $('#myotherfield').rules('add', {  // dynamically declare rules             required: true,             digits: true         });         $('#myfield').rules('remove'); // remove other rules.         // '.rules()' call, etc.         $('#myform').submit();  // trigger validation & submit          });  }); 

working demo: http://jsfiddle.net/kt93m/

the demo your original jsfiddle these principles applied.


Comments

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -