时间戳

首页 > 解决方案 > bootstrap 4 在表单验证上调用 javascript 函数

javascript - bootstrap 4 在表单验证上调用 javascript 函数

问题描述

所以我在我的项目中使用了 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 文件中，我有另一个侦听器，当在我的表单中提交注册按钮时，它应该被触发。无论出于何种原因，即使验证了所有输入字段，我也无法让它调用我的提交函数。这是我的 javascript 文件中的代码：

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


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

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

我已经尝试了很多东西，比如在我的 js 文件初始化之前和之后移动这个验证代码，但没有任何效果。目标是在此表单中有 2 个提交按钮（一个是注册，另一个是登录），并且根据按下哪个按钮，应该调用不同的函数。如果有人有任何想法，我将不胜感激！

标签： javascriptvalidationbootstrap-4form-submitaddeventlistener

解决方案

因此，如果有人感兴趣，我通过将按钮从提交更改为常规按钮并通过我自己的代码运行验证来解决我的问题。这是它的小提琴：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() 检查您想要的所有表单是否有效，然后执行您想要执行的其他操作

推荐阅读