jquery - 检测 jQuery 验证的 SubmitHandler 中的提交按钮

Question

我有一个表单需要一些验证后警告。这个概念很简单，这些值是允许的，但超出了正常范围。处理这个问题的方式是在验证提交处理程序中:

$('form').validate({
    highlight: function (element, errorClass) {$(element).addClass("invalidElem");},
    unhighlight: function (element, errorClass) {$(element).removeClass("invalidElem");},
    errorPlacement: function (error, element) {element.parent().parent().next().children().last().append(error);},
    errorClass: "errorMsg",

    submitHandler: function (form) {

        if (!WeightsRangeValidator("Height", txtHeight, heightWarning)) {
            return false;
        }

        if (!WeightsRangeValidator("Weight", txtWeight, weightWarning)) {
            return false;
        }

        form.submit();
    }        
});

问题是表单上同时有提交和取消按钮。取消按钮确实具有“取消”类，因此不会执行验证。不过，submitHandler 函数仍在被调用。我认为必须有一种方法来检测哪个提交按钮被单击，以绕过submitHandler处理程序的内容。

<小时/>

这是一个正在运行的 jsFiddler:http://jsfiddle.net/scarleton/ZSVFP/

表单具有三种有效状态:复选框(但不是两者)或文本框和下拉列表。当您单击“确定”时，验证就会生效。问题出现在取消上。如果您在文本框中输入任何内容并按取消，验证仍会尝试进行验证。我尝试添加以下处理程序，如果表单有效，则允许取消，但如果在文本框中输入字母则不允许取消。

btnCancel.click(function () {
    txtHeight.rules("remove");
    txtWeight.rules("remove");
    ddlDevice.rules("remove");
    $("#form").submit();
});

Answer 1

$('.submitBtn').on('click', function(){
    var $frm =  $ ("#form");
    $frm.validate()
    if($frm).valid()){
       submitHandler();
     $frm.submit()
    }
})

$('.cancel').on('click', function(){
   var $frm =  $ ("#form");
   if($frm.valid()){
    // Do Some action ...;
   }
})

或您可以在buttonsm上添加点击事件，并且每次根据clikcef的按钮更改参数，有关更多详细信息，请参见示例[演示][1]

请参阅 jquery 文档 http://docs.jquery.com/Plugins/Validation[1]: http://jsfiddle.net/abaksheyev/jKuVa/1/

还有更聪明的方法

submitHandler: function (form) {
      var val = $("input[type=submit][clicked=true]").val() // add this line to handler
  .......


//Add this into document.ready 
$("form input[type=submit]").click(function() {
    $("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
    $(this).attr("clicked", "true");
});