CODEWITHSUNDEEP
jqueryvalidationpluginsresponsefadeout
Nick Bewley
Nick Bewley

Reputation: 9289

fadeOut Validation messages Jquery

How do I use the jquery fadeOut function to fade out the validation response message "this field is required" at this Fiddle. I just want the messages to pop up (not fade in) then fade out slowly over maybe 3 seconds.

This is the js that controls the Validation plugin:

    $(document).ready(function() {
        $('#commentForm').validate({
            submitHandler: function(form) {
                $.ajax({
                    type: 'POST',
                    url: 'process.php',
                    data: $(this).serialize(),
                    success: function(returnedData) {
                        $('#commentForm').append(returnedData);
                    }
                });         
                return false;
            },
            errorPlacement: function(error, element) {
                  error.insertAfter( element).position({
                      my:'right top',
                      at:'right top',
                      of:element          
                  });
               }        
        }); 
    });

Thank you for your input.

Upvotes: 2

Views: 2953

Answers (2)

Felipe Lucio
Felipe Lucio

Reputation: 21

If you wish to make the timed fadeout effect run multiple times, you need to remove the error element as soon it disappears:

errorPlacement: function(error, element) {
    error.insertAfter( element).position({
    my:'right top',
        at:'right top',
            of:element          
        });
        // here the magic happens, we remove the element, forcing the errorPlacement callback to be run every time
        error.fadeOut(3000, function() { $(this).remove(); });
    }

Upvotes: 2

maxedison
maxedison

Reputation: 17573

All you need to do is call fadeOut on the error argument in errorPlacement():

           errorPlacement: function(error, element) {
              error.insertAfter( element).position({
                  my:'right top',
                  at:'right top',
                  of:element          
              });
              error.fadeOut(3000);
           }

Working example: http://jsfiddle.net/kmJ87/4/

Upvotes: 0

Related Questions