Question

So take a look at the code: http://jsfiddle.net/qb34B/

Type an invalid email, hit the Submit button. You will see that the error message fades in.

This is my problem: I want to be able to slideDown the error. But only fadeIn works. How can I get the error message to slideDown?

It needs to work in all browsers that jQuery supports (IE7+, Firefox, Safari, Chrome, etc)

Answer 1

Here is a working example. In this solution I’m using float:left on the form elements and then setting the wrapper option with a div.

    <form >
        <input type="email" name="email" placeholder="Enter email" style="float:left;"/>
        <input type="submit" id="submit" style="float:left;"/>
    </form>

    $(document).ready(function() {

        jQuery('form').validate({
            debug: true,
            rules: {
                email: {
                    required: true,
                    email: true
                }
            },
            wrapper: 'div',
            messages: {
                email: "Please enter a valid email address."
            },
            errorPlacement: function(error, element) {
                     error.appendTo(element.parent()).hide().slideDown('normal', function() {
                     //callback func
                });
            }
        });
    });