jQuery Validation plugin with two submit buttons?

Question

I have one form with around 50 fields and two submit buttons, "SAVE" and "SAVE & SUBMIT". If the user clicks "SAVE", then validate only some values, eg. field1, field2. When user clicks "SAVE & SUBMIT" button, it should validate all 50 fields and 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) { // for 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) { // for demo
                alert("data submited");
            }
        });
    });

});

I have created jsfiddle for this: example test

Answer 1

Your code...

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

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

You absolutely cannot do this:

1) You cannot call the .validate() method more than once on the same form. Any subsequent calls are always ignored.

2) You should not put the .validate() method inside of a click handler. The .validate() method is the initialization method of the plugin and only gets called once within a DOM ready event handler. After proper initialization, the submit button click is captured automatically by the plugin.

---

HTML Markup and Click Handlers:

This plugin also automatically captures the click of any input type="submit" and button type="submit" elements and initiates validation/submission.

So if you need to control what happens for two different buttons, then you first need to change your buttons into input type="button" or button type="button" elements.

Then you can use click() handlers to dynamically change the rules with the .rules() methods as per which button was clicked. See the .rules() methods documentation.

Use .submit() to programmatically submit. In other words, this will trigger a validation test and attempt to submit the form IF valid... same as if you had a submit button.

Use .valid() to programmatically test the form. In other words, this will trigger a validation test but will NOT submit the form IF valid.

---

Example:

$(document).ready(function () {

    $('#myform').validate({  // initialize the plugin on your form
        // options, rules and/or callbacks
    });

    //  IMPORTANT:  buttons are NOT type="submit"

    $('#button1').on('click', function(){  // capture the click           
        $('#myfield').rules('add', {  // dynamically declare the rules
            required: true,
            email: true
        });
        $('#myOtherField').rules('remove'); // remove the other rules.
        // another '.rules()' call, etc.
        $('#myform').valid();  // trigger the validation & do NOT submit        
    }); 

    $('#button2').on('click', function(){  // capture the click
        $('#myOtherField').rules('add', {  // dynamically declare the rules
            required: true,
            digits: true
        });
        $('#myfield').rules('remove'); // remove the other rules.
        // another '.rules()' call, etc.
        $('#myform').submit();  // trigger the validation & submit     
    });

});

Working DEMO: http://jsfiddle.net/Kt93M/

The demo is simply your original jsFiddle with these principles applied.

Answer 2

If you will use the same validation, maybe you should this code:

Insert an hidden action, to say the validation the method to use after we click the button

<input type="hidden" id="action" name="action">

Then in your submit Handler:

submitHandler: function (form, event) {
    var action = $("#formPagoContratista #action").val();
    if (action === "action_1") {
        firstFunction();
    }else if (action === "action_2") {
        secondFunction();
    }
}

Answer 3

If you have the below two buttons:

<div class="form-group text-right my-5 ">
  <input type="submit" name="save" class="btn btn-bg col-sm-2 form-control" value="Save">

You can validate and submit based on the two buttons: Save sends with ajax and no reload. Next button saves and redirects to next page.

$('form').validate({
            submitHandler: function(form, e) {
              var button = $(":focus", this);

              var name = button.context.submitButton.defaultValue;
              console.log(name);
              if(name == "Save"){
                $(form).ajaxSubmit();
              }else{
                form.submit();
              }
            }
          });

checkout this post: https://stackoverflow.com/a/61423083/1004799