Bootstrap 5 表单验证不会触发

Question

我有一个允许用户更改其帐户密码的表单，如下所示：

                        <div class="signup-form-small">
                            <form method="post" name="frmPassword" id="frmPassword" class="needs-validation" novalidate>
                                <div class="form-group">
                                    <div class="col form-floating">
                                        <input type="password" class="form-control" id="curpwd" name="curpwd" required>
                                        <label class="form-label" for="curpwd">Your Current Password</label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col form-floating">
                                        <input type="password" class="form-control" id="newpwd" name="newpwd" required>
                                        <label class="form-label" for="newpwd">Enter New Password</label>
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col form-floating">
                                        <input type="password" class="form-control" id="cnfpwd" name="cnfpwd" required>
                                        <label class="form-label" for="cnfpwd">Confirm New Password</label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <button type="submit" id="btnPwdSubmit" name="btnPwdSubmit" class="btn btn-primary btn-lg btn-block w-100 has-spinner">
                                        <div class="spinner-border float-right hidden" id="pwdspinner" role="status"></div>
                                        Change My Password
                                    </button>
                                </div>
                            </form>
                        </div>

在我的脚本中，我有以下代码块，应该普遍处理验证：

        $(document).ready(function () {
            'use strict';
            window.addEventListener('load', function () {
                var forms = document.getElementsByClassName('needs-validation');
                var validation = Array.prototype.filter.call(forms, function (form) {
                    form.addEventListener('submit', function (event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            }, false);

        });

最后，这是当用户单击表单中的“更改我的密码”按钮时触发的脚本代码：

            $('#frmPassword').submit(function (event) {
                event.preventDefault();

                setPwdDisabled();

                var obj = Object.fromEntries(new FormData(event.target));
                if (obj.Is_Body_HTML == 1) {
                    obj.Is_Body_HTML = true;
                }
                else {
                    obj.Is_Body_HTML = false;
                }
                if (obj.Is_Active == 1) {
                    obj.Is_Active = true;
                }
                else {
                    obj.Is_Active = false;
                }

                if ($('#curpwd').val() != $('#cnfpwd').val()) {
                    $('toastPwd').toast('show)');
                    return;
                }
                var json = JSON.stringify(obj);

                var request = $.ajax({
                    url: "../handlers/changepwd.ashx",
                    method: "POST",
                    data: json,
                    dataType: "json"
                });

                request.done(function (msg) {
                    if (msg.Success == false) {
                        $('#spnPwdErr').html(msg.Status);
                        $('#toastPwdFail').toast('show');
                    }
                    else
                        $('#toastPwdSuccess').toast('show');
                });

                request.fail(function (jqXHR, textStatus) {
                    $('#spnPwdErr').html('Unable to complete your request at this time.');
                    $('#toastPwdFail').toast('show');
                });

                request.always(function (jqXHROrData, textStatus, jqXHROrErrorThrown) {
                    setPwdEnabled();
                });
            });

无论出于何种原因，表单验证都不会触发，我也不知道为什么。 我在验证代码中添加了警报，但它们永远不会弹出。 无论如何都会发生表单提交。 我在控制台中没有收到任何错误或其他消息。 谁能解释为什么这不起作用？

Answer 1

删除添加事件监听器 - 将它放在 jquery 中准备好使其冗余 -

$(document).ready(function () {
            'use strict';
            var forms = document.getElementsByClassName('needs-validation');
            var validation = Array.prototype.filter.call(forms, function (form) {
                form.addEventListener('submit', function (event) {
                    if (form.checkValidity() === false) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    form.classList.add('was-validated');
                }, false);
            });
        });