有没有我可以听的事件发生在表单提交之后，并且在表单通过HTML5验证之后

Is there an event I can listent to that takes place after a form submit and after the form has been verified with HTML5?

本文关键字：之后 表单 验证 HTML5 表单提交 我可以 事件 有没有      更新时间：2023-09-26

我有这个表格：

   <div id="account-form">
        <form action="/Account/Login" id="login-form" class="form" method="post">
            <div id="input-fields">
                <div>
                    <input class="data-entry medium-margin" id="UserName" name="UserName" placeholder="Username (or guest)" required="required " size="25" type="text" value="">
                </div>
                <div>
                    <input class="data-entry medium-margin" id="Password" name="Password" placeholder="Password (or guest)" required="required " size="25" type="password">
                </div>
                <div>
                    <input class="data-entry inline-checkbox" id="RememberMe" name="RememberMe" type="checkbox" value="true"><input name="RememberMe" type="hidden" value="false">
                    <p style="margin-top: 0;">Remember me?</p>
                </div>
            </div>
            <button class="data-entry medium" id="login" type="submit">Login</button>
            <button class="data-entry medium" id="register" type="button" onclick="location.href='/Account/Register'">Register</button>
        </form>
    </div>

以及此 JavaScript 在表单提交后禁用输入。 

 <script type="text/javascript">
    (function() {
        document.getElementsByClassName('form')[0]
            .addEventListener("submit", function () {
                var inputs = document.getElementsByClassName("data-entry");
                for (i = 0; i < inputs.length; i++) {
                    inputs[i].disabled = true;
                }
    })();
</script>

当我输入登录数据，然后单击提交时，输入被禁用，提交验证失败，说明输入字段未填写。

有什么方法可以在HTML5验证后禁用输入字段吗？

只需安排超时为 0 的回调

.addEventListener("submit", function () {
    setTimeout(function() {
        var inputs = document.getElementsByClassName("data-entry");
        for (i = 0; i < inputs.length; i++) {
            inputs[i].disabled = true;
        }
    }, 0); });

这样，一旦submit事件处理完成，将执行禁用代码。但是，您必须重新启用这些字段，以防验证失败，否则用户将无法更正问题。

相关文章：