带有两个提交按钮的 jQuery 验证插件？答案

【问题标题】：jQuery Validation plugin with two submit buttons?带有两个提交按钮的 jQuery 验证插件？
【发布时间】：2014-06-27 11:17:59
【问题描述】：

我有一个包含大约 50 个字段和两个提交按钮的表单，“SAVE”和“SAVE & SUBMIT”。如果用户单击“保存”，则仅验证某些值，例如。场 1，场 2。当用户点击“保存并提交”按钮时，它应该验证所有 50 个字段并提交。

<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");
            }
        });
    });

});

我为此创建了 jsfiddle：example test

【问题讨论】：

你有什么问题？请在此处发布您的代码，而不仅仅是作为小提琴链接。
validate 旨在应用于表单一次。无论您先按哪个按钮，都将从那时起设置验证。在再次应用 validate 之前，您需要弄清楚如何从所有字段中删除现有验证。
@Barmar 正如我所说，我有 50 个字段，我发布了所有代码，这将是非常日志问题。对这个问题投反对票是没有意义的。我在 jsfiddle 上所做的所有测试。
您使用的是哪个validate（请下载页面）？一些验证插件允许您动态添加和删除规则（但我感觉您的不是其中之一）。
@TrueBlueAussie，他正在使用the jQuery Validate plugin，基于 OP 声明、“jQuery 验证插件”、他的 .validate() 代码和 jquery-validate 标签。是的，它允许动态规则更改。

标签： jquery jquery-validate

【解决方案1】：

您的代码...

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

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

你绝对不能这样做：

1) 你不能在同一个form 上多次调用.validate() 方法。任何后续调用都会被忽略。

2) 不应将 .validate() 方法放在 click 处理程序中。 .validate() 方法是插件的 initialization 方法，并且仅在 DOM 就绪事件处理程序中被调用一次。正确初始化后，提交按钮点击被插件自动捕获。

HTML 标记和点击处理程序：

此插件还自动捕获任何input type="submit" 和button type="submit" 元素的点击并启动验证/提交。

因此，如果您需要控制两个不同按钮发生的情况，那么您首先需要将您的按钮更改为 input type="button" 或 button type="button" 元素。

然后您可以使用click() 处理程序通过.rules() 方法根据单击的按钮动态更改规则。请参阅the .rules() methods 文档。

使用.submit() 以编程方式提交。换句话说，这将触发验证测试并尝试提交表单 IF 有效...就像您有一个 submit 按钮一样。

使用.valid() 以编程方式测试表单。换句话说，这将触发验证测试，但不会提交有效的表单。

示例：

$(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     
    });

});

工作演示：http://jsfiddle.net/Kt93M/

演示只是your original jsFiddle，应用了这些原则。

【讨论】：

非常感谢您对 .validate() 用法的详细解释
另一种选择：您可以使用提交按钮，例如，以便服务器知道点击了哪个按钮。这也是一种更具声明性的解决方案：使用 jQuery.validator.addClassRules()，添加或删除某个类以响应点击。这是@Sparky 的小提琴更新：jsfiddle.net/s6v45gka/1
@full.stack.ex，无论您是操作类还是使用 .rules() 方法都没有关系...在您的示例中，两个按钮都在验证后提交表单。但是，OP 不想同时提交两个按钮。
@full.stack.ex, also, you can simply add/remove the required class; you do not need to use the .addClassRules() method at all。 .addClassRules() 方法用于构造 compound 规则； required等标准规则已经可以由类自己分配了。
@Sparky，你是对的。您的解决方案是 100% 正确的。我们刚刚使用了您的答案，并添加了“声明性”方法来使用 2 个按钮提交。以为有人可能需要同样的东西。谢谢！

【解决方案2】：

如果您将使用相同的验证，也许您应该使用以下代码：

插入一个隐藏的动作，表示我们点击按钮后要使用的验证方法

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

然后在你的提交处理程序中：

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

【讨论】：

【解决方案3】：

如果你有以下两个按钮：

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

您可以根据两个按钮进行验证和提交：使用 ajax 保存发送，无需重新加载。下一个按钮保存并重定向到下一页。

$('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();
              }
            }
          });

查看此帖子：https://stackoverflow.com/a/61423083/1004799

【讨论】：