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
Post a Comment