MVC4不显眼的验证不等待远程验证完成

Question

我的ASP.NET MVC4应用程序具有在模型中定义的远程验证规则，并在控制器方法中实现。 我的表单会动态添加到页面中。 所以，我使用以下代码来触发验证。

$(tabId).on("submit", formId, function (event) {
       event.preventDefault();

       var form = $(this);

       form.removeData("validator"); 
       $.validator.unobtrusive.parse(form);

       if (form.valid())
       {
           // form submission 

           // THIS part executes even though the remote validation returns false
       }

       return false;
 });

它开始远程验证，不等待完成，然后提交表单。 如果任何其他字段无效（例如，名称是必填字段），则它会停止提交。 但是，它不会等待远程验证。

我在SO上找到了一些解决方法，比如link1和link2 。 但是，只有在我的页面中定义了jQuery验证规则时，这些才有效。 但是，我正在使用MVC4模型验证规则。 因此，我不想再次在我的视图页面中重新定义规则。

有什么想法解决？

Answer 1

您可以在验证程序上使用pendingRequest变量，以查看表单尝试提交时是否还有任何挂起

$(tabId).on("submit", formId, function (event) {
       event.preventDefault();
       var form = $('#formid');
       form.removeData("validator"); 
       $.validator.unobtrusive.parse(form);

       if (form.valid() && form.data('validator').pendingRequest == 0)
       {
           // form submission 
       } 
       return false;         
});  

如果要在字段验证时向用户显示消息，可以使用startrequest和stopRequest函数：

$(function(){
    var validator = $('#formid').data('validator');

    var oldStartRequest = validator.startRequest;
    validator.startRequest = function (element) {     
        console.log(element.name + ' has begun validating')
        oldStartRequest.apply(this, arguments);
    };

    var oldStopRequest = validator.stopRequest;
    validator.stopRequest = function (element, valid) {
        console.log(element.name + ' has finished validating');
        console.log(element.name + ' is valid: ' + valid)
        oldStopRequest.apply(this, arguments);
    };
});

Answer 2

表单添加到页面后，您应立即调用$.validator.unobtrusive.parse(form) 。 在提交事件中调用它是不正确的，很可能是你的问题。 Validator和Unobtrusive做的事情之一是为你捕获这些事件，并且由于Unobtrusive的工作方式，如果你想在成功提交时做特定的事情，你必须偷偷地将自己附加到submitHandler如下所示：

$('#nameForm').data('validator').settings.submitHandler = function(form){
   alert('successful submit'); 

   //do AJAX submit here

   return false; //otherwise page will get reloaded
};

我已经为你做了一个工作的例子，但请注意，由于jsfiddle的工作方式，做一个AJAX调用有点困难，所以我不得不添加一个名为html的隐藏字段，如果你更改true和false之间的值你可以看到不同的行为。

http://jsfiddle.net/ryleyb/ZeZAu/1/

Answer 3

您可以附加到全局ajax事件 ，并确保在提交表单时没有任何内容正在等待回复。 未经测试的例如

var isInAjaxCall = false;
var queuedFuncs = [];
$(function() {
    $(document).bind("ajaxStart", function () {
        isInAjaxCall = true;
     }).bind("ajaxStop", function () {
        isInAjaxCall = false;
        while(queuedFuncs.length > 0){
           queuedFuncs.shift();
        }
    });
});

function SubmitForm() {
    if (isInAjaxCall) {
        queuedFuncs.push('SubmitForm');
        return false;
    }

    var form = $('#form');
    form.removeData("validator");
    $.validator.unobtrusive.parse(form);

    if (form.valid()) {
        // form submission 
    }
    return false;
}

Answer 4

我的帖子提供了解决方案，但必须有更好的方法：

ASP.NET-MVC jQuery不显眼的远程验证返回误报