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

只要表单被添加到页面，您应该立即致电$.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的隐藏字段，如果您更改了真假你可以看到不同的行为。

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

Answer 2

你可以连接到global ajax events并确保没有等待答复时提交表单。未经测试

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 3

您可以使用验证程序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 4

我的帖子在这里提供了解决方案，但必须有一个更好的办法：

ASP.NET-MVC jQuery unobtrusive remote validation returns false positives