停止事件继续deferred.reject

时间:2017-03-24 20:41:13

标签: javascript jquery ajax promise deferred

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

我的应用程序顶部有一些导航链接,它们具有活动和非活动状态。理论上,我想从一个跳到另一个,如果存在一个不完整/有效的表单,我会触发验证错误并保持在同一页面上。在我的情况下发生的事情是表单验证工作正常,但顶部的导航链接将状态从非活动状态更改为活动状态,无论点击哪个。

我有一个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之前,我将继续执行事件if if,if if我不会停下来,一切都很好。

不确定我在这里做错了什么。我很感激任何帮助。

谢谢!

约翰尼拉

1 个答案:

答案 0 :(得分: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(...)