我不能让我的表单进行验证,尽管在页面上和样板布局中都有脚本。我试过将标签移动到不同的地方,但服务器端验证是唯一工作的部分。表单不会运行客户端验证。
<% 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="[email protected]" 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标记
<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>
型
你知道我在这张表格上做错了什么吗
2条答案
按热度按时间pkln4tw61#
为了形成动作执行按钮应输入|按钮类型提交。
这是你的代码中缺少的,据我所知。
如果你的代码不起作用,请尝试从以下位置删除类'validated-form'和
novalidate
属性:字符串
收件人:
型
在我看来,下面的代码不是在服务器端工作,而是在本地主机上工作。传播和默认值正在传递代码,因此阻止了JavaScript验证。
form.checkValidity()
函数总是返回true:型
更改后,没有JavaScript来验证表单,只有浏览器端验证,这在任何时候都是允许的,当我在服务器端尝试时。
pxy2qtax2#
你试过把表单类改成“需求验证”吗?
也试试这个代码
字符串