CODEWITHSUNDEEP
jqueryvalidationplugins
João
João

Reputation: 633

How to apply a simple fade transition to jQuery Validate?

I've been trying to apply a simple fade transition (e.g. fadeToggle();) to the jQuery Validation plugin, but had no luck with it. Here's my code:

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

Is there a simple way of adding this fade transition?

Upvotes: 1

Views: 782

Answers (1)

balexandre
balexandre

Reputation: 75103

For a very simple answer:

You're already using the valid() method to check if there's an error or not... why not using that?

for example:

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

Upvotes: 2

Related Questions