2012-07-20 52 views
0

我正在使用一个真棒插件来验证我的表单在前端:http://docs.jquery.com/Plugins/Validation。问题是表单有两个按钮(返回并提交)。我可以绕过使用css类取消验证表单的后退按钮,这要归功于插件;但其他js仍然会触发(动画gif,禁用提交按钮以及提交不透明度的更改)。 DARN。jquery验证插件两个按钮

我试着在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(); 
    } 
}) 
+0

我可以检查某个地方的课程,并返回false吗? – jahrichie 2012-07-20 22:20:46

+0

您可以将“返回”按钮更改为“type ='button''而不是'type ='submit''? – 2012-07-21 15:46:07

+0

@AndrewWhitaker感谢您的建议,不幸获胜;在这种情况下工作:-( – jahrichie 2012-07-22 16:43:33

回答

0

我走了一条不同的路线,虽然工作得很好,但有点丑陋和骇人听闻。

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

尝试将除“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(); 
    } 
}); 

的想法是高亮显示的形式为不活动仅在验证成功和形式实际上已提交。

+0

几乎,但即使表单没有验证,现在仍然会激活gif动画,所以在您修复错误时仍会继续。 – jahrichie 2012-07-20 21:22:40

+0

确保没有剩余的绑定,例如一些'click',它显示了加载镜像 – Zlatev 2012-07-20 21:26:12

+0

它没有从$('#loading_image')show中触发show(); // show animated gif – jahrichie 2012-07-20 21:36:46