Как сделать валидацию значений полей по нажатию на отдельной кнопке?

Question

[Люций Мунинг]

Добрый день!

Интересует реализация на такой вопрос.

Исходные данные: есть форма на 10 полей.
В форме есть кнопка "Сохранить" - которая делать сохранение (вызывает методы store и update модели).

Как сделать валидацию значений полей по нажатию на отдельной кнопке "Проверить" ?
Возможна ли реализация в таких вариантах : 1) когда кнопка находиться внутри элемента формы; 2) и вне него.

Comments

[iljaGolubev]

Сделайте кнопку

<input type="Submit" name="Check" value="Проверить">.

В методе контроллера где происходит save и update выполняйте save и update только если POST не содержит Check.
1)2) - Возможно

Answer 1

[Александр Севиринов]

Можно сделать прибегая к возможностям HTML5
Функция валидации jQuery (Передаете в функцию объект всей формы, например $('#form')):

let validation = form => {
      let fields = form.find('input, select'), // какие типы полей проверять
          check = []; // объявляем массив для хранения результатов перебора

      $.each(fields, (_, item) => { // перебираем все поля
        if ($(item).is(':required') && !$(item).is(':disabled')) { // проверяем только поля с required (обязательные) и не проверяем выключенные поля disabled
          check.push(item.checkValidity()); // записываем в массив полученные результаты
        }
      });
      form.addClass('was-validated'); // добавляем класс форме что все поля валидны
      let isValid = item => item === true;
      if (check.every(isValid)) { // проверяем каждое значение на true
        form.removeClass('was-validated'); // если какое то поле не true удаляем общий класс формы, тогда у нас форма отобразит поле с невалидным значением
      }
      return check.every(isValid); // возвращаем ответ true tckb все поля валидны и false если хотя бы одно обязательное поле не валидно
    };

в теге формы прописываем:
<form novalidate id="form">
Для отображения полей с ошибкой используем CSS:

.was-validated .field-class:valid {
    border-color: green;
}
.field-class:invalid {
    border-color: red;
}