在提交按鈕附近顯示Bootstrap表單驗證

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建議 ：

從花生畫廊的Chimin'進來:invalid偽類將在form元素中設置，如果其中任何input無效。 您可以執行以下form:invalid > input[type=submit]:after { /* Your message */ }

無法顯示文本，但是如果表單無效，最終會添加一些CSS以使按鈕變灰。 奇跡般有效。

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