阻止事件在deferred.reject上繼續

Question

希望你們中的一些人可以幫助我解決這個問題。

我的應用程序頂部有一些導航鏈接，它們具有活動和非活動狀態。 從理論上講，我想從一個跳到另一個，並且如果存在一種形式不完整/無效的表格，我會觸發驗證錯誤並停留在同一頁面上。 在我的情況下，表單驗證工作正常，但是頂部的導航鏈接從非活動狀態更改為活動狀態，無論單擊哪個狀態。

我有一個ValidateForm函數，該函數可以驗證並提交表單（如果表單有效），否則返回deferred.reject（）;。

function ValidateForm(submitAnyway) {
    var deferred = $.Deferred();
    var form = $('form');

    // if form doesn't exist on the page - quit
    if (typeof form[0] === "undefined") return true;       


    // now check for any validation errors
    if (submitAnyway) {
        if (!$(form).valid()) {                
            deferred.reject();
        } else {
            $(form).submit();
            deferred.resolve();
        }
    } else {
        deferred.resolve();
    }

    return deferred.promise();
}

對於這些頂部導航鏈接，我有一個點擊事件，如下所示：

var DonutsClickEvent = function (e, arg) {
    var url = $(this).attr('data');
    var data = { param: arg };

    if (typeof url === "undefined") return false;

    $.when(window.ValidateForm(false)).then(
        function () {
            LoadPartialView_Main(url, data);                
        },
        function(){
            return false; // I'm trying to return false here to stop event from continuing 
        }
    );  
    Console.log("This statement runs before $.when completes");
    // and event continues and the clicked nav button changes 
    // its state from non-active to active, even though form doesn't validate
}

我最近在代碼中添加了$ .Deferred功能，因為某些事件觸發了混亂的序列...在我的validateForm方法返回true或false之前，基於此我將繼續執行事件（如果為true，如果為false），我將停止一切都很好。

不知道我在做什么錯。 我將不勝感激。

謝謝！

強尼

Answer 1

您無法異步決定是否要阻止默認操作。 到獲得異步結果時，您的函數已經返回，並且默認操作已發生。

如果必須異步驗證，則必須始終阻止默認操作。 如果驗證成功，那么您將必須使用Javascript手動執行所需的操作。

因此，假設LoadPartialView_Main()是驗證成功后想要發生的事情，則可以執行以下操作：

var DonutsClickEvent = function (e, arg) {
    var url = $(this).attr('data');
    var data = { param: arg };

    if (typeof url === "undefined") return false;

    window.ValidateForm(false).then(function () {
        LoadPartialView_Main(url, data);
    }, function(err){
        // probably show validation error message to the user here
    });  
    // always prevent default action
    return false;
}

---

另外，沒有理由將$.when()與單個諾言一起使用。 您可以只使用window.ValidateForm(...).then(...)