Question

在尝试提交无效情况时，我遇到了一些无法提交表单的问题。

假设我有以下代码：

window.onload = function(){
    $("form").on("submit",function (event) {
        $("#errorDiv").fadeOut(null, null, function () {
            OnSubmitForm(event)
        });

    })
}


function OnSubmitForm(event) {
    let items = $("#mytable").dxDataGrid("instance").getSelectedRowsData();
    if (items.length == 0) {
        event.preventDefault();
    } else if (items.some(item => item.booleanProperty != true)) {
        event.preventDefault();
        let badItems = items.filter(item => item.booleanProperty != true).map(item => item.id);
        let divText = "<strong>bad items:<br>"
            + badItems.join("<br>") +"</strong>";

        $("#errorDiv").html(divText);
        $("#errorDiv").fadeIn();
    }
}

我的意图是fadeOut，我用来显示错误的div，动画完成后，我叫OnSubmitForm，将event传递给它。

我的动作流程如下：

我点击“提交”按钮
fadeOut介入
OnSubmitForm被称为
else if条件为true，因此执行了该块
event.preventDefault()有效
我再次单击提交按钮
表格已提交

发生了什么事？

此外，我注意到event.isPreventedByDefault()的结果在第一个false之前返回event.preventDefault()，然后返回true，因为该事件已经被阻止一次，根据{{3}}。

更多信息 我忘了提到，如果我这样做违反了第一个“规则”（第一个if语句），一切都会按预期进行。

Answer 1

淡出完成后，您呼叫OnSubmitForm。这种情况发生在<{>} 事件处理程序功能完成之后，而没有阻止默认行为。

在您尝试停止该表单时，该表单已经提交。

Javascript preventDefault（）在第二次提交时被忽略

1 个答案: