使用'；需要验证'；在HTML javascript中启动，但它'；它没有进入检查验证方法

我的应用程序中有两个文本字段和一个提交按钮。当我点击提交按钮时，如果任何一个文本字段为空，它应该告诉我“请填写该字段”。所以我在脚本中使用了引导“需要验证”。现在，当我单击submit时，它不会进入验证的if或else循环。如果条件为true，它应该进入else循环并执行ajax调用。如果ajax调用成功，它应该向用户发送警报消息。但是我没有看到警告信息，POST呼叫也没有发生

我的HTML脚本是

（函数（）{
"严格使用",；
window.addEventListener（'load'，函数（）{
//获取要应用自定义引导验证样式的所有表单
var forms=document.getElementsByClassName（'needs-validation'）；
//对它们进行循环并防止提交
log（“我在函数内部”）；
var validation=Array.prototype.filter.call（表单，函数（表单）{
表单.addEventListener（'submit'，函数（事件）{
log（“我在里面提交”）
if（form.checkValidity（）==False）{
log（“我在真实中”）；
event.preventDefault（）；
event.stopPropagation（）；
}
否则{
console.log（“我在其他地方”）；
var部门=$（“#角色”）.val（）；
var facultyList=$（“#faculty”）.val（）.split（'，'）；
facultyList.pop（）；
console.log（facultyList）；
$.ajax({
键入：“POST”，
url:“/departments/add”，
数据：{
"角色":部门,，
'facultylist'：JSON.stringify（facultylist）
},
成功：功能（结果）{
警报（“已添加部门”）；
document.location.href=“/department”；
}
})
}                   
form.classList.add（'was-validated'）；
}，假）；
});
}，假）；
}) ();

部门：
有效。
请填写这个字段。
学院：
提交
当您单击“提交”按钮时，您的表单会执行一个默认操作，即将表单数据（以GET属性的形式）发送到保存表单的同一页面（通常可由表单标签的“操作”和“方法”属性控制）

这实际上意味着在执行任何JS代码之前，页面会“重新加载”自身

要防止该默认操作，请添加event.preventDefault（）；在您的事件侦听器代码块中，应该没有问题

form.addEventListener('submit', function (event) {

    event.preventDefault();

    console.log("I am inside submit")

同样重要的是，不要依赖浏览器验证，这很容易避免。同时确保实现后端验证/卫生功能。
存在一些问题


JS布尔值应该是
false
而不是
false
无论验证如何，都应调用
preventDefault（）
和
stopPropagation（）
因为您想停止提交按钮的默认行为

演示：

  var validation = Array.prototype.filter.call(forms, function (form) {
            form.addEventListener('submit', function (event) {

                event.preventDefault();
                event.stopPropagation();
                if (form.checkValidity() === false) {
                    console.log("I am inside true");
                }
                else {
                    console.log("I am inside else");
                    var departments = $("#role").val();
                    var facultyList = $("#faculty").val().split(',');
                    facultyList.pop();
                    console.log(facultyList);

                    $.ajax({
                        type: 'POST',
                        url: '..',
                        body: {
                            'role': departments,
                            'facultylist': JSON.stringify(facultyList)
                        },
                        success: function (result) {
                            alert("The department has been added");
                        }
                    })
                }                   

                form.classList.add('was-validated');
        }, false);
  });