CODEWITHSUNDEEP
jqueryvalidationjquery-validate
Rey
Rey

Reputation: 3767

Why doesn't slideDown on error messages work with jQuery validation?

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)

Upvotes: 0

Views: 1588

Answers (3)

Andy E
Andy E

Reputation: 538

Update I updated the code so that it will successfully slideDown the error and hide. Unfortunately I had to use setInterval which isn't ideal. But it's a workaround if you can't find another way.

http://jsfiddle.net/XrMzL/5/

You could try the following

    $(document).ready(function(){

    setInterval(function() {
        if($(".valid").prev().hasClass("errorSlideDown")) {
           $(".valid").prev().slideUp();
        }
    },1000);

    jQuery('form').validate({
        debug: true,
        rules: {
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            email: "Please enter a valid email address."
        },
        errorPlacement: function(error, element) {
            if (!element.prev().hasClass("errorSlideDown")) {
                var itm = $("<div />").html(error.html()).addClass("errorSlideDown").hide();
                itm.insertBefore(element).slideDown();
            }
        }
    });
    });

I used insertBefore to make life easy when checking to see if the dynamic span I created exists already by using the .prev() function.

Upvotes: 1

sinemetu1
sinemetu1

Reputation: 1726

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
                });
            }
        });
    });

Upvotes: 3

ShankarSangoli
ShankarSangoli

Reputation: 69915

Error is displayed using a label element which is an inline element so it cannot be slided(animated changing its height).

If you want sliding behavior then you will have to write code to generate the required markup and apply sliding behavior on it.

Take a look at this demo I have written a custom logic to show sliding effect in case you think of going for custom logic.

Demo

Upvotes: 2

Related Questions