jQuery Plugin: : Validate/Validation - errorPlacement isn't executed... (Animation)

Question

I'm using the newest jQuery library and the jquery validate plugin to validate some form:

I have placed some form to validate in my footer. As soon as some error-messages are shown my footer should be animated and stretched. the validation works allright, just the errorPlacement isn't called at all. I also read (here: jQuery Validation errorPlacement ), that validate() already has an errorPlacement default action, which should be overwritten by mine. (I guess with the following code my messages would not get displayed anymore, right?

I tried (of course with the other elements as well (messages/rules):

$(document).ready(function(){  //.ready -> steht erst nach dem Laden des DOMs zur Verfügung
 $("#nlForm").validate({

 debug: true,
 onfocusout: false,
 onKeyUp: false,
 errorLabelContainer: $("#results"),
 wrapper: "li", //wrapping the errormessages in <li>

 rules: { }, 
 messages: { },

 errorPlacement: function( ) {
    $("#footer").animate({
    height: "300px",
 }, 1500 );
 },

 submitHandler: function(form) {
    $('#results').css('display', 'none') //hides my results-div in the beginning

    $("#footer").animate({
      height: "300px",
    }, 1500 );

    var docHeight = $(document).height(); 
    var windowHeight = $(window).height(); 
    var footerheight = 70; //additional pixels of stretched footer
    var scrollPos = docHeight - windowHeight + footerheight; 

    $('html, body').animate({ //scrolling down
       scrollTop: scrollPos+'px'
    }, 1500);

    $.post('/process.php', $("#nlForm").serialize(), function(data) {
       $('#results').html(data); 
    });

 $('#results').fadeIn(1500); //fades in my results-div

 }
 });
});

It wont give me any error, but it doesn't animate either. I have no idea why my errorPlacement function isnt called. (I also tried to add

document.write('hi there')

Just do see if the function gets called. But it does not...

I would be really glad if someone could post some simple example which is working. Or just tell me what I could change...

Furthermore I intend to animate the appearance of the errors as well. Any idea how this could be achieved? I would have to get the label-object which is about to be generated in my results-div. How can I adress that?

Thanks already

cheers

(sry btw. for posting at the wrong place the first time.. )

-------unfortunately I can't post any answer yet so I have to edit my post------- Answer:

Thanks for your answer; to 1.; I know I just omitted them..

rules: {
        nlName: {
            rangelength: [3, 25], // muss zwischen 3 und 25 zeichen lang sein.
            required: true,
            notName: true,
        },
        nlEmail: {
            required: true,
            email: true,  //has to be a valid email, returns true if so.
        }
    }, //ohne Komma gehts nicht...
    messages: {
        nlName: {
   required: "Bitten geben Sie einen Namen ein",
   notName: "Ihr Name lautet nicht 'Name'!",
   rangelength: "Ihr Name muss zwischen 3 und 25 Zeichen lang sein.",
    },
        nlEmail: "Ihre Emailadresse scheint ungültig zu sein",
    },

Because its mainly in German and this part works well. I dont get what you mean with 'is of the form'? Do you mean that there is no code placing the errors anywhere? Thats true, I didn't do that until now. I made that by the normal message showing way. But that my errors still are displayed is a hint that my errorPlacement is not called properly, isn't it?

That the submitHandler is only called if everythings ok, is clear. I just do the animation twice. once to have place to display the final message 'successful subscripion blabla, generated by my process.php and once only if errors have to be displayed...

Well I will definitely have a look at this invalidHandler. Thx for now.

Answer 1

I notice two things in your code:

1. Your rules and messages are empty.
2. errorPlacement is of the form: function(error, element) { } you will need to place the error object somewhere on the page if you want it to appear. This method is called for each error on the form, so I do not think this is what you're trying to achieve.

I recommend you use the invalidHandler option. That allows you to to do your animation when there are validation errors on the form.

EDIT: NOTE: The submitHandler is called if there are no validation errors on the form.