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

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

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

如何在执行表单提交方法之前强制完成验证方法

使用jquery、jqueryUI、ASP.NETMVC2

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

}

更新2

---

所有答案都建议，若未进行验证，则应阻止submit方法运行。这提供了非常糟糕的用户体验：验证需要一些时间。用户应在提交按钮中按两次以提交表单。如何允许表单使用单击提交？使Validate sync method AlllW满足此要求，但我不确定是否为此使用了sync call合理的解决方案。

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

看看jQueryValidate插件，它支持使用超级简单的mvc删除验证方法

---

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

将jquery绑定到表单的submit事件不是最好的选择，否则就在用户离开文本框时

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

---

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

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

---

这里的服务器呼叫在哪里？您的Validateobject函数在哪里？@BobTodd:我更新了问题并添加了在代码sampleValidate中调用的Validate方法async方法，它会立即返回，而不会等待服务器的结果。因此，根据验证返回的结果，您的代码示例始终成功或始终阻止提交。如果Validate as更改为执行同步调用，则您的示例可以工作，如更新答案中Valuadate代码中的注释所示。我不确定将验证更改为执行同步调用是否合理，jquery文档警告不要进行syns调用。在这种情况下，用户会看到活动的提交按钮并单击它。之后，输入元素模糊事件禁用提交按钮。不确定这是否会阻止提交事件，因为按钮已被单击。无论如何，这看起来像是糟糕的用户体验：点击提交被忽略，用户应该再次点击。最好在验证成功结束后执行提交。如何实现这一点？您的代码要求用户按两次提交按钮以提交表单。在第一次按下时，验证正在进行，提交总是被取消。我更新了问题。如何使用单击提交表单？谢谢。jqueryvalidatepluginremote允许在提交之前调用服务器端方法。表单包含可能从模糊事件服务器验证的输入元素。如何仅验证在单击“提交”按钮时失去焦点的元素。验证会更新某些字段，因此无法为每个字段调用服务器，只需验证更改的字段。如何实现这一点？我有一个问题，其实你不必这么做。该插件足够智能，只验证自上次验证以来已更改的字段。两个用途：1如代码示例所示，如果验证正常，我需要更新其他字段。例如，在验证产品代码产品名称后，还应更新库存的价格和数量。远程方法要求远程验证程序在成功时仅返回true。如何获取从远程验证器返回的名称/值对列表？2如何将所有表单字段传递给远程验证程序？根据远程单据，仅传递当前字段值。