jquery validate catching the height of the error container

Question

Hi All

I'm trying to get the height of the error container when using 'jquery validate' plugin when submitting an erronous form, but I can't seem to get the height value of the error container when it appears. The alert box isn't even showing. What is the solution, please?

Here's the code:

$(".validate").validate({
    rules: {
        j_username: "required"
    },
    submitHandler: function(form) {
        //$(":submit", form).attr("disabled","disabled").val("Please wait....");

        $(":submit", form).attr({
                                disabled: "disabled",
                                value: "Please wait...."
                                });         


        var errH = $("#errorMsgContainer").height();
        if($("#errorMsgContainer").is(":visible")){     
            alert("visible and '#errorMsgContainer' height is: " + errH);
        }
        else{
            alert("Not visible and '#errorMsgContainer' height is: " + errH);
        }

        form.submit();

        return false;
    },
    messages: {
        j_username: "Please type your email address correctly!",
        j_password: "Your password and username do not match!"
    },
    ignore: ".catalogueDD",
    errorLabelContainer: $("#errorMsgContainer")
});

Thanks.

Answer 1

if the element doesn't take up any space in the document, then is(':hidden') will return true even if it is effectively visible, It may be safer to instead do this:

if( !$('#errorMsgContainer').is(':visible') ) {
    // it's hidden, do something
}
else {
    // it's not hidden so do something else
}

SOURCE :: http://www.electrictoolbox.com/jquery-element-is-visible/