Question

因此，我正在为项目使用Bootstrap 4，我真的很喜欢它们对表单中每个输入元素进行验证的方式。我正在使用此代码来验证我的表单，该网站不在他们的网站上

<script>
    (function () {
        "use strict";
        window.addEventListener(
            "load",
            function () {
                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                var forms = document.getElementsByClassName("needs-validation");
                // Loop over them and prevent submission
                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
        );
    })();


</script>

唯一的是，在我的JavaScript文件中，当表单中提交了注册按钮时，我还有另一个监听器应该被激发。无论出于什么原因，即使所有输入字段都经过验证，我也无法调用它的Submit函数。这是我的javascript文件中的代码：

document.addEventListener("DOMContentLoaded", function() {
   initApp();
});


function initApp() {
    document.querySelector("#sign-up").addEventListener("submit", createAccount, false);
}

function createAccount() {
    alert('test');
}

我已经尝试了很多方法，例如在初始化js文件之前和之后移动此验证代码，但是没有任何效果。目标是采用这种形式的2个提交按钮（一个是注册按钮，另一个是登录帐户），并根据按下哪个按钮，应调用其他功能。如果有人有任何想法，我将不胜感激！

Answer 1

正如我在评论中所述，我不确定您在做什么错，一定是某些事情。检查此脚本是否正常工作，我对您的代码没有做任何更改，只是将它们放在一起。

    document.addEventListener("DOMContentLoaded", function() {
      initApp();
    });

    function initApp() {
        document.querySelector("#sign-up").addEventListener("submit", createAccount, false);
    }

    (function () {
        "use strict";
        window.addEventListener(
            "load",
            function () {
                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                var forms = document.getElementsByClassName("needs-validation");
                // Loop over them and prevent submission
                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
        );
    })();

    function createAccount() {
        alert('test');
    }

<form id="sign-up">
    <input type="text" class="needs-validation" />
    <input type="submit" />
</form>

Answer 2

因此，如果有人感兴趣，我通过将按钮从Submit更改为常规按钮并通过自己的代码运行验证来解决了我的问题。这是小提琴：https://jsfiddle.net/bv84ncz5/

var forms = document.getElementsByClassName("needs-validation");
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
    form.classList.add("was-validated");
});

let password = document.querySelector("#password");
let email = document.querySelector("#email");

if (password.checkValidity() === true && email.checkValidity() === true) {
    alert("sup");
}

要使Bootstrap验证起作用，您唯一需要做的就是向表单中的每个输入添加经过验证的类。然后，您可以使用checkValidity（）检查所需的所有表单是否均有效，然后执行其他操作

引导程序4在表单验证中调用javascript函数

2 个答案: