在 HTML javascript 中使用了"needs-validattion"引导程序，但它没有进入检查验证方法

Question

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

我的HTML脚本是

(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
console.log("I am inside function");
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
console.log("I am inside submit")
if (form.checkValidity() === False) {
console.log("I am inside true");
event.preventDefault();
event.stopPropagation();
}
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: '/departments/add',
data: {
'role': departments,
'facultylist': JSON.stringify(facultyList)
},
success: function (result) {
alert("The department has been added");
document.location.href = "/department";
}
})
}                   

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

<div class="row top-space-30">
<form class="needs-validation">
<div class="form-group row">
<label class="col-md-4 col-form-label text-md-right" for="deprole">Department :</label>
<div class="col-md-6">
<input id="role" name="deprole" type="text" placeholder="QA" class="form-control input-md"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
</div>
<div class="form-group row">
<label class="col-md-4 col-form-label text-md-right" for="faculty">Faculties:</label>
<div class="col-md-8">
<input class="form-control" type="text" id="faculty" required>
<input type="hidden" id="TestHidden" value="{{result}}" required>
</div>
</div>
<div class="col-md-6 offset-md-4 top-space-30">
<button type="submit" id="submit">Submit</button>
</div>
</form>
</div>

当我运行脚本时，我可以在控制台日志中看到"我在提交中"。但当我点击提交按钮而不输入详细信息时，我不会在控制台日志中看到"我是真实的"。但验证是会发生的。当我在两个字段中输入详细信息并单击提交按钮时，我在控制台日志中看不到"我在其他地方"，在我的应用程序中也看不到警报功能

我需要的是：-当我点击带有详细信息的提交按钮时，我应该会看到ajax调用，并且应该会看到警报消息。

Answer 1

有一些问题。。

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

演示：https://codeply.com/p/wtSkr8Eucc

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);
});

Answer 2

当您单击"提交"按钮时，您的表单会执行一个默认操作，即将表单数据(以GET属性的形式(发送到保存表单的同一页面(通常这些数据可以由表单标记的"action"one_answers"method"属性控制(。

这实际上意味着页面在执行任何JS代码之前都会"重新加载"自己。

若要阻止该默认操作，请添加event.prventDefault((；在您的事件侦听器代码块中，它应该很好。

form.addEventListener('submit', function (event) {
event.preventDefault();
console.log("I am inside submit")

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