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

hi3rlvi2 于 6个月前发布在 Go

关注(0)|答案(2)|浏览(38)

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

<% 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>

型
你知道我在这张表格上做错了什么吗

mongoose

来源：https://stackoverflow.com/questions/69185983/bootstrap-validation-not-working-despite-including-script-and-following-docs

2条答案

按热度按时间

pkln4tw61#

为了形成动作执行按钮应输入|按钮类型提交。
这是你的代码中缺少的，据我所知。
如果你的代码不起作用，请尝试从以下位置删除类'validated-form'和novalidate属性：

<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>

字符串
收件人：

<form action="/artists/new" method="POST" 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 type='submit' class="btn btn-success">Create Profile</button>
   </div>
   <a href="/artists">All artists</a>
</form>

型
在我看来，下面的代码不是在服务器端工作，而是在本地主机上工作。传播和默认值正在传递代码，因此阻止了JavaScript验证。
form.checkValidity()函数总是返回true：

if (!form.checkValidity()) {
  event.preventDefault()
  event.stopPropagation()
}

型
更改后，没有JavaScript来验证表单，只有浏览器端验证，这在任何时候都是允许的，当我在服务器端尝试时。

赞(0）回复(0）举报 6个月前

pxy2qtax2#

你试过把表单类改成“需求验证”吗？
也试试这个代码

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

字符串

赞(0）回复(0）举报 6个月前

我来回答

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

2条答案

相关问题

热门标签

最新问答