當點擊取消按鈕時如何取消Jquery Validation submitHandler？

Question

在這裏，我有一個Jquery驗證插件和Struts2的問題。

我在我的表單中有3個按鈕，如下所示。

<td><s:submit type="button" value="Save" theme="simple" cssClass="valid" /></td> 
<td><s:submit type="button" value="Cancel" theme="simple" action="cancel" cssClass="cancel"/></td> 
<td><s:submit type="button" value="Submit" theme="simple" cssClass="valid"/></td> 

當表單被提交時，驗證將使用jquery驗證完成。表單成功提交後，我希望用戶確認提交表單？

所以我用jQuery的Validate函數submitHandler。 但是，當我點擊取消此submitHandler正在執行。點擊取消按鈕時，我不希望發生任何事情。這是JavaScript部分。

$(document).ready(function() { 

    $("#MyForm").validate({ 
    //Some validation rules 
     submitHandler: function(form) { 
     //this runs when the form validated successfully 
     //My code after submitting the form 
      alert("Hello"); 
     } //End of Submit Handler 
    }); 

}); 

我知道這將是一個簡單的answer.Though請幫我找到它的人

Answer 1

問題的根源是，你form包含三個submit按鈕。即使每個人都有不同的value，插件也會觸發每一個。

1）將取消按鈕更改爲type="reset"。該插件將忽略這種類型的輸入（但是，HTML將清除表單數據）。

http://jsfiddle.net/hnyd2/

OR

2）將取消按鈕的form以外。佈局將有所不同，但您可以使用CSS更精確地放置按鈕。

http://jsfiddle.net/hnyd2/1/

OR

3）給它的form裏面，但阻止使用jQuery的preventDefault()的submit按鈕的默認行爲。您必須在按鈕上放置一個id，以便您可以正確定位。

$('#cancel').click(function(e) { 
    e.preventDefault(); 
    // anything else to do on click 
}); 

http://jsfiddle.net/hnyd2/3/