引导验证不工作，尽管包括脚本和以下文档

Question

尽管在页面和样板布局中都有脚本，但我无法使表单验证。我试过将标签移动到不同的地方，但服务器端验证是唯一有效的部分。该表单不会运行客户端验证。

<% layout('layouts/boilerplate') %> 
<div class="row">
<h1 class="text-center">Create Artist Profile</h1>
<div class="col-6 offset-3">
<form action="/artists/new" method="POST" novalidate class="validated-form" enctype="multipart/form-data">
<div class="mb-3">
<label class="form-label" for="email">Email</label>
<input class="form-control" type="email" id="email" name="email" placeholder="[e-mail]" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="mb-3">
<label for="formFile" class="form-label">Upload band photo</label>
<input class="form-control" type="file" id="image" name="image" multiple="false">
</div>
<div class="mb-3">
<button class="btn btn-success">Create Profile</button>
</div>
<a href="/artists">All artists</a>
</form>        
</div>
</div>

下面是我的layouts/boilerplate.ejs主体中的脚本标签

<script>
(function () {
'use strict'
bsCustomFileInput.init()
// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.validated-form')
// Loop over them and prevent submission
Array.from(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})
</script>

你知道我在这个表单上做错了什么吗?

Answer 1

您是否尝试过将表单类更改为" needs-validation">

也试试这个代码

(function() {
'use strict';
window.addEventListener('load', function() {

var forms = document.querySelectorAll('.validated-form')

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