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的隐藏字段，如果你改变了你可以看到不同的行为在真与假之间的价值。

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

Answer 3

您可以附加到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 4

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

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

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

4 个答案: