Как провести валидацию формы во время заполнения полей?

Question

[Magic6200]

Как поправить код, чтобы во время заполнения полей формы происходила проверка сразу же, а при нажатии на кнопку "Отправить" ничего не происходило пока не будут заполнены верно все поля?
Также, чтобы ничего не происходило, если поля пусты изначально.

Answer 1

[0xD34F]

Выносим код проверки корректности введённых данных в отдельную функцию, дёргаем её при отправке, и по событию input:

function validateInput($input, regex) {
  const result = regex.test($input.val());

  $input
    .closest('.form-group')
    .removeClass('has-success has-error')
    .addClass(result ? 'has-success' : 'has-error');	

  return result;
}

function validate() {
  return [
    validateInput($('#name'), /^[a-z]{2,16}$/i),
    validateInput($('#message'), /^[a-z]{15,100}$/i),
  ].every(Boolean);
}

$('form').on({
  input: validate,
  submit(e) {
    if (!validate()) {
      e.preventDefault();
    }
  },
});

Comments

[Magic6200]

Благодарю вас, ваше решение идеально подходит под мои нужды!

Answer 2

[Exploding]

Что ж вы все с этой валидацией то!)) Не внимательно читали инфу по html5 валидации форм?
Есть же всё уже: required, pattern. Что еще не хватает?))