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

Question

[Magic6200]

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

Answer 1

[0xD34F]

const regex = {
  name: /^[a-z]{2,16}$/i,
  message: /^[a-z]{15,100}$/i,
};

const validateInput = input => $(input)
  .closest('.form-group')
  .removeClass('has-success has-error')
  .addClass(regex[input.id].test(input.value) ? 'has-success' : 'has-error')
  .hasClass('has-success');

$('form').on('input submit', function(e) {
  const isSubmit = e.type === 'submit';
  const isErrors = (isSubmit ? [...$('.form-control', this)] : [ e.target ])
    .map(n => !validateInput(n))
    .some(Boolean);

  if (isErrors && isSubmit) {
    e.preventDefault();
  }
});

Comments

[Magic6200]

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

Answer 2

[Exploding]

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