如何对 jQuery Validate 应用简单的淡入淡出过渡？答案

【问题标题】：How to apply a simple fade transition to jQuery Validate?如何对 jQuery Validate 应用简单的淡入淡出过渡？
【发布时间】：2012-04-20 10:03:21
【问题描述】：

我一直在尝试对jQuery Validation plugin 应用一个简单的淡入淡出过渡（例如fadeToggle();），但没有成功。这是我的代码：

$.validator.setDefaults({

    // Add fadeToggle(); to showErrors
});

$("#login_form").validate();

$("#login_form").submit(function(event) {
    event.preventDefault();

    if($("#login_form").valid()) {

        $.post("/user/ajax_login", $('#login_form').serialize(), function(data) {
            if(data.redirect != null) {
                window.location.replace(data.redirect);
            }
        },'json');
    }
});

有没有添加这种淡入淡出过渡的简单方法？

【问题讨论】：

标签： jquery validation plugins

【解决方案1】：

一个非常简单的答案：

您已经在使用valid() 方法来检查是否有错误...为什么不使用它？

例如：

if($('#login_form').valid()) {
  // everything seams fine, lets submit the form

  $.post("/user/ajax_login", $('#login_form').serialize(), function(data) {
        if(data.redirect != null) {
            window.location.replace(data.redirect);
        }
    },'json');
}
else {
  // there is some kind of validation error

  $('label.error')
    .hide() // by this time all .error classes are shown, let's hide them
    .fadeIn('slow'); // and show them gently...

}

Live example on JsBin

【讨论】：