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

Question

Aleksey · Accepted Answer

Сделаем простой пример валидации формы и показом текста ошибки встроенными средствами браузера. Чтобы задать собственное описание для возможных ошибок, воспользуемся методами `Constraint validation API`: `checkValidity` и `setCustomValidity`.

```javascript
const formInput = document.querySelector('#myForm input');

formInput.addEventListener('input', ({target}) => {
  target.setCustomValidity(''); // сброс ошибки
  target.checkValidity(); // проверка
});
```

Для этого запустим проверку `checkValidity()` при каждом изменении текста в поле `input`. Если проверка не будет завершена успешно возникнет событие `invalid`.
И нам останется лишь описать нужные варианты сообщений для каждой из ошибок.

```javascript
formInput.addEventListener('invalid', ({target}) => {
  if (target.value === '') {
    target.setCustomValidity('Поле обязательно для заполнения');
    return;
  }
  target.setCustomValidity('Текст должен быть в верхнем регистре');
});
```

Важно: мы сбросываем ошибку `setCustomValidity('')` каждый раз, прежде чем провести проверку. Это нужно чтобы исключить показ предыдущей ошибки, которая сохраняется в памяти.

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

Ответы

Каталог