如何在提交前执行服务器端验证

Question

表单包含输入元素。使用模糊的服务器回调验证输入的值 事件安德勒。

如果输入了错误的值并按下了提交按钮，则表单将以错误的值提交： 验证方法未完成，但表单提交操作方法已执行。

如何强制 Validate() 方法在执行表单提交方法之前完成？

使用 jquery、jqueryUI、ASP .NET MVC2。

<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);
            }
        }
    });

更新

按照BobTodd评论中的要求，这里是验证方法：

function Validate(elem) {
var i,
  res;
$.ajax('Grid/Validate' );
   {
       data: $("#Form").serializeArray(),
       //async: false,
       type: 'POST',
       error: function (jqXHR, textStatus, errorThrown) {
           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

所有答案都建议在未执行验证的情况下阻止提交方法运行。这提供了非常糟糕的用户体验：验证需要一些时间。用户应在提交按钮中按两次才能提交表单。如何允许单击提交表单？使用 Validate() 同步方法可以解决此问题，但我不确定是否使用同步调用来解决此问题。

Answer 1

您必须在表单提交时重新运行 Validate 方法并在那里取消它。

看一下 jQuery Validate 插件，它支持删除验证方法，使用 mvc 可以非常轻松地工作。

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

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

Answer 2

只需禁用提交按钮，直到验证完成。

Answer 3

难道你最好将 jquery 绑定到表单的提交事件，否则它只是在用户离开文本框时...

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

Answer 4

验证字段时，如果元素有效，则将 valid 类添加到该元素。然后，在提交表单时，只需检查所有字段是否都具有该类：

$('#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');
    }
});