停止活动在 deferred.reject 上继续

Question

希望你们中的一些人可以帮助我解决这个问题。

我的应用程序顶部有一些导航 link，它们具有活动和非活动状态。理论上，我想从一个跳转到另一个，如果存在一个不是 complete/valid 的表单，我会触发验证错误并停留在同一页面上。我的情况是表单验证工作正常，但顶部的导航 links 将状态从非活动状态更改为活动状态，以单击哪个为准。

我有一个 ValidateForm 函数，如果有效则验证并提交表单，否则它 returns 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();
}

我为那些顶部导航 link 设置了点击事件，如下所示：

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 方法 return 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(...).

停止活动在 deferred.reject 上继续

Stop event from continuing on deferred.reject

javascript

ajax

jquery

promise

deferred