為什么表單的 onsubmit function 只調用一次？

Question

和錫紙上寫的差不多。 這個片段演示了這個問題：

 function check(e) { console.log($('input[name="myinput"]').val()); if ($('input[name="myinput"]').val() == "123") { return true; } else { $('input[name="myinput"]')[0].setCustomValidity("Invalid"); return false; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <form onsubmit="return check()"> <input name="myinput"> <input type="submit"> </form> </div>

表單加載后，在輸入字段中輸入1並提交表單。 提交失敗，因為輸入字段的值不是123 ，並且值"1"記錄在控制台中。 現在將值更改為其他任何值並重新提交表單； 控制台中沒有多余的行，即使輸入的值為123 ，“無效”表單的有效性仍然存在。

為什么onsubmit處理程序只調用一次？

Answer 1

因為處於“無效”state 的表單（因為表單內的輸入處於“無效”狀態）不會提交。

創建表單有效性不會在submit事件上更改，因為正如您所注意到的，您不會得到任何新的submit 。 您必須在提交之前更改表單的有效性。 通常，表單有效性會在每個輸入上單獨檢查。 從這里是你自己的口味。 我建議在blur上檢查每個輸入的有效性：

$('input[name="myinput"]').on("blur", () => {
    // Do your checks and setCustomValidity depending on if is valid or not
});

這樣，只有當所有輸入都有效時，您才會收到submit事件。 順便說一句，要使其正常工作，您必須在啟動時將所有輸入設置為無效的 state，以避免在不觸及任何輸入的情況下提交空提交。

如果所有輸入為空，另一種方法可能是禁用提交按鈕。 為此，您還需要 JavaScript 並檢查所有輸入上的change或input事件。