Question

我有一个表格，上面有40个问题，一些必填，一些可选。最后，当用户单击“提交”时，我正在使用Bootstrap的form-validation.js来检查提交表单之前的内容。一切正常。

但是，表单是如此之长，当用户点击“提交”时，他们看到的只是底部可选问题上的一堆绿色复选标记。（他们唯一表示表单未提交的信息是页面未重新加载。）

什么是最好/最简单/最干净的方式来通知用户屏幕外元素不满足验证要求？（而且该表格实际上并未提交。）

JavaScript不是我的强项，但是我的第一个念头是修改表单验证脚本，以在发现错误时在“提交”按钮附近显示一个小div，但我一直无法弄清楚该怎么做。使这项工作。（是否可以像在form-validation.js中添加一两行一样简单？）

// Example starter JavaScript for disabling form submissions if there are invalid fields
(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
    Array.prototype.filter.call(forms, function (form) {
      form.addEventListener('submit', function (event) {
        if (form.checkValidity() === false) {
          event.preventDefault()
          event.stopPropagation()
        }
      }, false)                         
    })
  }, false)

}())

Answer 1

在Twitter上提出了一个建议，即只使用应用于无效表单的CSS Psuedo类：

Twitter Suggestion：

Chimin'从此处的花生画廊进入：:invalid伪类将在其中的任何form无效的情况下设置在input元素上。您可以执行类似form:invalid > input[type=submit]:after { /* Your message */ }
的操作

无法显示文本，但是如果表单无效，最终会添加一些CSS以使按钮变灰。就像魅力一样。

            form:invalid > input[type=submit]{background-color:#ccc;}

在提交按钮附近显示引导程序表单验证

1 个答案: