Question

我正在使用一个很棒的插件来验证我在前端的表单：http://docs.jquery.com/Plugins/Validation。问题是表单有两个按钮（后退和提交）。由于插件，我可以绕过后退按钮来验证使用css类取消的表单;但其他js仍然会触发（动画gif，禁用提交按钮，以及提交的不透明度更改）。 DARN。

我尝试在submitbtn的click函数中包装整个东西，因此后退按钮与它没有任何关系，这不起作用。我还尝试将后退按钮放在一个可以反转样式效果的单击功能中，这样做不起作用。

我寻求更聪明的男人或女人的建议，谢谢！

$(".simple_form").validate({
    submitHandler: function(form) {
        $(".submitbtn").addClass("opacitychangeonsubmit"); // change submit button opacity
        $(".submitbtn").attr("disabled", true);// disable the submit btn
        $('#loading_image').show(); // show animated gif
        form.submit();
    }
})

Answer 1

尝试将除form.submit();之外的所有内容放入“成功”回调中。

$(".simple_form").validate({
  success: function() {
    $(".submitbtn").addClass("opacitychangeonsubmit"); // change submit button opacity
    $(".submitbtn").attr("disabled", true);// disable the submit btn
    $('#loading_image').show(); // show animated gif
  },
  submitHandler: function(form) {
    form.submit();
  }
});

这个想法是只有在验证成功并且实际提交了表单时才将hilight表格设置为非活动状态。

Answer 2

我走了一条不同的路线，尽管工作得很好，但有点丑陋和黑客。

$(".simple_form").validate({
    submitHandler: function(form) {

        if ((form.elements.item(10).value) == "Back") {
            form.submit();
        } else {
            $(".submitbtn").addClass("opacitychangeonsubmit"); // change submit button opacity
            $(".submitbtn").attr("disabled", true);// disable the submit btn
            $('#loading_image').show(); // show animated gif
            form.submit();
        }
    }
});

Jquery验证插件两个按钮

2 个答案: