单击取消按钮时如何禁止Jquery验证submitHandler?

时间:2013-04-25 15:46:51

标签: jquery struts2 jquery-validate submit

这里我遇到了Jquery Validation插件和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
    });

});

我知道这将是一个简单的答案。尽管请帮助我找到人

1 个答案:

答案 0 :(得分: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的submit阻止preventDefault()按钮的默认行为。您必须在按钮上放置id,以便正确定位。

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

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