Question

表单包含input元素。使用来自blur的服务器回调验证输入的值事件安特勒。

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

如何强制在执行表单提交方法之前完成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

如果未执行验证，所有答案都建议阻止提交方法运行。这提供了非常糟糕的用户体验：验证需要一些时间。用户请在提交按钮中按两次以提交表单。如何通过单击提示表单？ Maksing Validate（）同步方法可以解决这个问题，但我不确定是否正在使用同步调用合理的解决方案。

Answer 1

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

查看jQuery Validate插件，它支持删除验证方法，这些方法非常容易使用w / 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');
    }
});

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

4 个答案: