取消类不适用于 submitHandler 忽略按钮单击答案

【问题标题】：cancel class not working for submitHandler to ignore button click取消类不适用于 submitHandler 忽略按钮单击
【发布时间】：2011-05-04 17:00:49
【问题描述】：

得到这两个图像按钮：

<input type="image" src="images/Update.png" name="btnSubmit" value="Update"/>
<input type="image" src="images/Cancel.png" value="Cancel" name="btnCancel" class="cancel" onclick="hide_edit_div()" />

现在，即使单击“取消”按钮也会运行提交处理程序。如何修改它以忽略它？

$(document).ready(function(){
  if(this.forms[4]) {
    $("#editTaskInfo").validate({
        rules:{"task_title": {required: true},
               "task_instr": {required: true},
               "task_desc" : {required: true}
                },
       submitHandler: function(form) {
         var postData = $('#editTaskInfo').serialize();
         $.ajax({type: "POST",
                 url: "post_task.php",
                 data: postData,
                 dataType: "json",
                 success: function(data) {
                   if(textStatus == 'success') {
                     $("div.error span").html(data.msg);
                     $("div.error img").hide();
                     $("div.error").show();
                     $("#static_task_price").text(data.price);
                     $("#static_title").text(data.title);
                     $('html, body').animate({scrollTop:0}, 'fast');
                     hide_edit_div();
                     $("div.error").fadeOut(10000);
                   }
                 },
                 error: function(jqXHR, textStatus, errorThrown) {
                   $("div.error span").html(errorThrown);
                   $("div.error img").show();
                   $("div.error").show();
                 }
         });
       }
    }
    );
  }
});

编辑：（因为我在 8 小时内无法回答自己的问题，多么愚蠢的限制）

将第二个按钮修改为这样的 div：

<div id="btnCancel" style="float:right; cursor:pointer; width:50px; height:20px; background-image: url(images/Cancel.png); " onclick="hide_edit_div()">&nbsp;</div>

现在，如果我能正确定位它。 ;-)

【问题讨论】：

标签： jquery submit validation

【解决方案1】：

使用cancel 类只会bypass the validation and will not stop the actual submission。您需要在其他地方处理该部分。可能的解决方法：

更改Cancel 按钮的类型，使其不再触发提交。
自己触发表单提交，只有当正确的按钮被点击时——见JQuery Validate - class="cancel" submit button only stops validation once

【讨论】：

【解决方案2】：

你不能简单地使用：

<img src="images/Cancel.png" id="btnCancel" onclick="hide_edit_div()" />

【讨论】：

不，仍然进入 submitHandler。
@MB34 查看我关于为什么会发生这种情况的回答以及建议的修复方法。
@MB34 看到我将
正如你可以从我的编辑中获得的一样，我使用了一个 div，它按计划工作。

【解决方案3】：

像这样改变取消按钮的类型；

<input class="cancel" type="button" id="close" value="Cancel" />

【讨论】：

题主想使用“图片”类型而不是“按钮”类型，所以这不是答案。