Отображение проверки формы начальной загрузки рядом с кнопкой «Отправить»

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

В Твиттере есть предложение использовать класс CSS Psuedo, который применяется к недопустимой форме:

Предложение Twitter :

Чимин виз галереи арахиса здесь: псевдокласс :invalid будет установлен на элемент form, если любой input внутри него недопустим.Вы могли бы сделать что-то вроде form:invalid > input[type=submit]:after { /* Your message */ }

Не удалось получить текст для отображения, но в итоге добавили немного CSS для выделения кнопки серым цветом, если форма недействительна.Работает как шарм.

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