Jquery验证插件两个按钮

Question

我正在使用一个很棒的插件在前端验证我的表单：http://docs.jquery.com/Plugins/Validation。问题是表单有两个按钮（返回和提交）。多亏了这个插件，我可以使用css类cancel绕过返回按钮来验证表单；但其他js仍然会触发（动画gif、禁用提交按钮以及将不透明度更改为提交）。该死。

我试着把整个东西包装在submitbtn的点击函数中，这样后退按钮就不会和它有任何关系，这不起作用。我还试着在点击功能中只放了后退按钮，这会逆转风格效果，但没有成功。

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

$(".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();之外的所有内容都放入"success"回调中。

$(".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();
  }
});

这个想法是，只有在验证成功并且表单实际提交的情况下，才将表单标记为非活动。

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();
        }
    }
});