Question

I am having a problem with the Ajax errorPlacement for my Validation Plugin (See this Fiddle). ErrorPlacement combined with position:absolute is forcing my ajax validation response to pop up in the wrong place.

If the user has not entered any information yet, the error messages pop up in the correct position (floated to the right side of the input field in red text). However, if the user has inputted information, then deletes it, the ajax alert (“this field is required”) pops up in the wrong place in the field below where it is supposed to. To view the problem, type in all fields correctly, then delete your name. The message “this field is required” pops up in the email field, but it belongs in the name field.

The js that controls the validation is:

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

The css that it is causing the problem is:

label.error { position:absolute;}

I need to include this css so that I can float the errors over the input fields. See the Fiddle to see the problem. Thank you!

Answer 1

Just revise your css as follows:

form p {
    position: relative;   /* This ensures error label is positioned within the p tag */
}
label.error {  
    top: 0; /* This ensures that it lines up with the top of the input */
    right:90px; 
    color: red; 
    position:absolute;
}

Even tested in IE just to be sure…