How to perform server-side validation before submit

Form contains input element. Entered value is validated using server callback from blur event andler.

If wrong value is entered and submit button is pressed, form is submitted with wrong value: Validate method is not completed but form submit action method is executed.

How to force Validate() method to be completed before form submit method is executed ?

jquery, jqueryUI, ASP .NET MVC2 are used.

<form id="Form" class='form-fields' method='post'   action='/Report/Render'>
  <input id='test' name='test' value='test' />
  <input id='_submit' type='submit' value='Show report' />
</form>

    $('#test').bind({
        blur: function (e) {
            if (!Validate(e.target)) {
                cancel(e);
            }
        }
    });

Update

As required in BobTodd comment here is validate method:

function Validate(elem) {
var i,
  res;
$.ajax('Grid/Validate' );
   {
       data: $("#Form").serializeArray(),
       //async: false,
       type: 'POST',
       error: function (jqXHR, textStatus, errorThrown) {
        开发者_如何学C   elem.skipBlur = true;
           errorMessage(decodeErrorMessage(jqXHR.responseText === undefined ? '' : jqXHR.responseText,
                      textStatus, errorThrown));
           elem.focus();
           elem.select();
           elem.skipBlur = false;
           elem.ischanged = true;
           res = false;
       },
       success: function (data) {
           elem.ischanged = false;
           for (i = 0; i < data.length; i += 1) {
               $('#' + data[i].name).val(data[i].value);
           }
           res = true;
       }
   });
return false; //  res;

}

Update2

All answers suggest to prevent submit method to run if validation is not preformed. This provides very bad user experience: validate takes some time. User shoudl press two times in submit button for form to submit. How to allow form to submit using single click ? Maksing Validate() sync method alllws this but i'm not sure is using sync call reasonable solution for this.

---

You will have to rerun the Validate method on form submit and cancel it there.

Look at the jQuery Validate plugin, it supports remove validation methods that work super easy w/ mvc.

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

http://docs.jquery.com/Plugins/Validation/Methods/remote#options

---

Just disable the submit button until validation is complete.

---

Wouldnt you be best served binding that jquery to the submit event of the form instead otherwise its just when the user leaves the textbox...

$('.form-fields').bind({
        submit: function (e) {
            if (!Validate(e.target)) {
                cancel(e);
            }
        }
    });

---

When you validate a field, add a valid class to the element if it's valid. Then, when submitting the form, simply check if all of the fields have that class :

$('#Form').submit(funciton(e){
    $(this).find('input').length == $(this).find('input.valid').length || e.preventDefault();
});
$('#Form input').bind({
    blur: function (e) {
        if(Validate(e.target))
           $(e.target).addClass('valid');
        else  
           $(e.target).removeClass('valid');
    }
});