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