Jquery Validate Plugin Concern

Question

Hi All,

I am trying my way around on using the jquery validate plugin but I cant seem to make it work on one particular aspect.

I have this scenario, my form has limited space so the label error generated by the validate plugin cannot be seen if ever there is a validation error

So what I did is, I created a container below my form to serve as container for the error. Initial display of this container is none (display:none)

Here's my markup so that you can visualize it.

<form id="myform">

</form>
<div id="container">
    <h4>There is an error in your form entry.  Kindly correct please.</h4>
</div>

I found out on the net regarding an internal method of the validate plugin regarding the errorplacement so I made use of it.

$("#myform").validate({
    errorPlacement: function(error, element) {
            error.appendTo("div.container");
    }
});

All is well when an error has occured it gets appended nicely on my container. My problem is upon correcting the error, the label error gets hidden but my container div is still shown.

What can I do so that after you have corrected the error, the container div gets hidden also. Thanks.

Answer 1

There's an errorContainer option for this, use it like this:

$("#myform").validate({
    errorContainer: "div.container",
    errorPlacement: function(error, element) {
            error.appendTo("div.container");
    }
});

The selector given to this option will be shown/hidden if there are/aren't any errors, respectively.