asp.net mvc client side validation status: need to attach/detach overlay

I am in process of creating ASP.NET MVC 2 application which uses Data Annotations for Client Side validation data generation

I have the following JQuery to to add overlay anytime a button is clicked on a form

    $(":button").click(function () {
     var overlay = jQuery('<div id="overlay"><img src="/content/images/indicator2.gif" alt="Processing Request Please Wait"/> </div>');
    overlay.appendTo(document.body);
    });

this works most of the time but I have been noticing that many a times when client side validation fails the overlay remains.

I wish to attach overlay only if there are no client side validation errors. How can I get status of client side validation.

something like

if( client_error==null)
{
attach overlay

}

Also, if this is not the right way to get an overlay let me know.

Found Another question but no answer https://stackoverflow.com/questions/4848539/block-ui-and-client-side-validations

Thank you,

Mar

**Edit **

nekno's solution is most suitable right now.

I found another link that could give deeper insight for other looking for the same thing

http://www.phpvs.net/2010/04/26/manually-validate-an-asp-net-mvc-form-on-the-client-side-with-microsoftmvcvalidation-js-and-jquery/

Are you using a traditional form (Html.BeginForm()) or an AJAX form (Ajax.BeginForm())?

If you're using an AJAX form, then you can handle this situation by putting your overlay div on the form with style="display:none;" and passing an AjaxOptions object to the form, then the MVC AJAX library will show/hide it automatically only if the form passes validation and submits.

<% Html.EnableClientValidation(); %>
<% using(Ajax.BeginForm(new AjaxOptions() { LoadingElementId = "overlay" }) { %>
<div id="overlay" style="display:none;">
    <img src="/content/images/indicator2.gif" alt="Processing Request Please Wait"/>
</div>
...
<% } %>

You can check out Brad Wilson's post on Unobtrusive Ajax in ASP.NET MVC 3, which discusses the MVC 2 behavior before unobtrusive AJAX as well.

If you're using a traditional form, then you could either apply generic show-overlay code to all forms on the page (as shown below), or give your form an id so you could show a different overlay for each form. You call the client-side validation method, which returns an array of errors. If there are no errors, validation succeeded and the submit continues. This does have the side effect of calling the validation code twice, because the MVC validation framework hooks the form submit event and automatically calls validate() again. But, the fact that it happens twice is imperceptible, and in reality, with dynamic validation that validates a field as soon as you enter a value and move focus away, the validation code already runs multiple times on your page anyway. It just doesn't always happen immediately twice in a row.

Place this script in your View at the bottom, below all form tags:

<script type="text/javascript">
    $("form").submit(function (e) {
        var errors = Sys.Mvc.FormContext.getValidationForForm(this).validate('submit');
        if (errors.length == 0) {
            $("#overlay").show();
            // Or use jQuery BlockUI
            $.blockUI({ message: $("#overlay") });
        }
    });
</script>

See more info from Scott Guthrie, where he demonstrates canceling the form submit and submitting it yourself. He does it to work with dynamic data from partial views.

If your situation allows, download the jQuery Block UI plugin. Will do what you want (to show that message). Its pretty simple, I use it all the time.