带有多个提交按钮的条件表单验证答案

【问题标题】：Conditional Form Validation with multiple submit buttons带有多个提交按钮的条件表单验证
【发布时间】：2014-12-11 20:17:51
【问题描述】：

我有一个简单的表单，它有一个复选框和 3 个提交按钮。仅当单击三个按钮之一时才需要勾选复选框字段。这是表单的 html：

<form role="form" action="udpate.php" id="review" method="post">

<div class="checkbox">
<label class="checkbox">
<input type="checkbox" name="approved" value="approved">
</label>
</div>

<p>I have approved all changes and are happy to proceed</p>

<button type="submit" class="btn btn-default" name="buttonType" id="Reject"  value="Reject">Reject</button>
<button type="submit" class="btn btn-default" name="buttonType" id="Pending"  value="Pending">Pending</button>
<button type="submit" class="btn btn-default" name="buttonType" id="Approve"  value="Approve">Approve</button>
</form>

这是一个使用 jQuery 验证插件的脚本：

 <script>
     $().ready(function() {
         $("#Approve").click(function() {
             $("#review").validate(); 

        });
    });
 </script>

目前单击 3 个按钮中的任何一个都会执行验证，但我只需要它来验证用户是否单击了“批准”按钮。只有这样才需要勾选复选框，否则可以留空。

是否可以进行某种验证来检查单击了哪个按钮，然后如果在继续之前单击了该按钮，则还检查复选框是否为空？

【问题讨论】：

你能分享你完成的代码吗？
@Mayank 我刚刚添加了更多详细信息，包括单击 3 个按钮中的任何一个时正在运行的 JQuery 验证代码

标签： javascript jquery html forms validation

【解决方案1】：

为表单和复选框添加ID，例如：“form1”、“checkbox1”

<form id="form1" ...>
    <input type="checkbox" id="checkbox1" ... />
    ...
</form>

然后将 jQuery 添加到当前代码中：

$('#form1 button[type="submit"]').click(function(e){
    e.preventDefault();                             // this for prevent form from submit

    if($(this).val() == "Approve"){                 // check if third button was clicked
        if($('#form1 #checkbox1').is(':checked')){  // check if checkbox is checked
            $('#form1').submit();                   // submit form
        }else{
            // here paste your info code, that checkbox is not checked
        }
    }else{                                          // any other button
        $('#form1').submit();
    }
});

【讨论】：