Q:

Removing a freeze panel after validation fails on the client using jQuery

I have a freeze panel that pops up when a user submits a form preventing them from clicking on any other controls within the page.  This works fine along with validating the form controls from the attributes set on my MVC Service controller.  
The problem is when a user enters an email address with a space in-between the account name and the @ sign - someName @email.com.  I receiving a small white popup box validating error message pointing at the email textbox.  I'm guessing it's from jQuery because the Create controller method never fires off.  The big problem is the freeze panel stays in place, so you cannot correct the problem until you refresh the page. 
I'm a novice when it comes to jQuery and lost on how to correct this issue.  I'm guessing that I need to identify when jQuery has fired off its validation exception for an incorrect email address, so that I can change the css property for the freeze pane back to the hidden state.  
Any help would be greatly excepted! 
In my model class I have this property for the email. 
    [Required(ErrorMessage = "Email required")]
    [StringLength(125), EmailAddress(), Display(Name = "Email Address")]
    public string Email { get; set; }

And in my controller I have this simple create method. 
    [HttpPost]
    public ActionResult Create(ClientService clientservice)
    {
        if (ModelState. IsValid)
        {
            context. ClientServices. Add(clientservice);
            context. SaveChanges();

            return RedirectToAction("Completed");
        }         
            return View("Create");
    }

My Create view I have this code that loads a partial view containing the input controls along with the freeze pane div and jQuery script controlling the panel. 
   @using (Html. BeginForm()) {
   @Html. ValidationSummary(true)
   <fieldset class="user-input">
       <legend>Client Service</legend>
       <h2 class="margin-indent">How to contact -</h2><br />
    @Html. Partial("_CreateOrEdit", Model)

       <p class="margin-indent">
        <input id="pageSubmit" type="submit" value="Submit" />
    </p>
   </fieldset>
   }

   <div id="FreezePane" class="FreezePaneOff">
   <div id="InnerFreezePane" class="InnerFreezePane"> </div>
</div>

<script type="text/javascript">
$(function () {

    $('#pageSubmit').click(function (event) {
    var itemErrors = validator.numberOfInvalids();
    if (itemErrors >= 1) {
        event.preventDefault();
    } else {
        $('html,body').scrollTop(10);
        $('#FreezePane').toggleClass('FreezePaneOn');
        $('#InnerFreezePane').text("Processing...");
    }
});
</script>

A:

After some more searching I came across this bit of code that does exactly what I needed.  It captures the submit, and attaches a handler to prevent the default action on a button after the form is validated.   
    $('form').one('submit', function (evt) {
        //unhide the freeze panel after validating form
        $('html,body').scrollTop(10);
        $('#FreezePane').toggleClass('FreezePaneOn');
        $('#InnerFreezePane').text("Processing...");
        /**
         * disable default action (this handler will be attached after first 
         * submit event and it will prevent any further submit action
         */
        $(this).on('submit', function (evt) {
            evt.preventDefault();
    });

