Как сделать валидацию формы js

Сделаем простой пример валидации формы и показом текста ошибки встроенными средствами браузера. Чтобы задать собственное описание для возможных ошибок, воспользуемся методами Constraint validation API: checkValidity и setCustomValidity.

const formInput = document.querySelector('#myForm input');

formInput.addEventListener('input', ({target}) => {
  target.setCustomValidity(''); // сброс ошибки
  target.checkValidity(); // проверка
});

Для этого запустим проверку checkValidity() при каждом изменении текста в поле input. Если проверка не будет завершена успешно возникнет событие invalid. И нам останется лишь описать нужные варианты сообщений для каждой из ошибок.

formInput.addEventListener('invalid', ({target}) => {
  if (target.value === '') {
    target.setCustomValidity('Поле обязательно для заполнения');
    return;
  }
  target.setCustomValidity('Текст должен быть в верхнем регистре');
});

Важно: мы сбросываем ошибку setCustomValidity('') каждый раз, прежде чем провести проверку. Это нужно чтобы исключить показ предыдущей ошибки, которая сохраняется в памяти.