Bootstrap表单验证样式不生效是怎么回事？

司徒红彦提问于 2026-03-02 17:51:21 阅读 5

组件

我按照文档给表单加了needs-validation类，也写了novalidate属性，但提交时还是走浏览器默认验证，Bootstrap的红色边框和提示完全没出现。

是不是还要额外引入什么JS？我只用了bootstrap.min.css，没加bootstrap.bundle.js，会不会是这个原因？

<form class="needs-validation" novalidate>
  <input type="text" class="form-control" required>
  <div class="invalid-feedback">请输入内容</div>
</form>

Forms表单响应式框架栅格系统

我来解答赞 2 收藏

反馈

1 条解答

技术爱景 Lv1

就是你猜的这个原因，Bootstrap的表单验证必须配合JS才能跑起来。

光有CSS是不够的，因为novalidate只是禁用了浏览器原生的验证提示，但Bootstrap的红色边框和错误信息显示，需要JS在提交时动态给表单加上was-validated类，或者手动给输入框加is-invalid类。

解决办法有两个。

第一个，直接引入Bootstrap的JS文件，把bootstrap.bundle.js加上就行，官方文档里的验证示例代码也得一并复制过去。

第二个，如果你不想引入整个Bootstrap JS库，可以只写一段原生JS来处理验证逻辑，代码量也不大：

(function() {

  '.addEventListener('load', function() {

    var forms = document.getElementsByClassName('needs-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);

})();

这段代码的意思是，表单提交时检查有效性，不通过就阻止提交，同时加上was-validated类，这样Bootstrap的CSS选择器.was-validated .form-control:invalid就能匹配上，红色边框和invalid-feedback里的提示文字就出来了。

在WordPress主题里加的话，放footer.php或者用wp_footer钩子注入都行，注意别重复绑定事件。

2026-03-02 18:00