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

Question

[Дмитрий]

<form class="modal-form validate-form" id="validate-form" action="#">
      <input class="g-input modal-form__input" data-validate-field="name" type="name" name="Имя" placeholder="Ваше имя" inputmode="text">
      <input class="g-input modal-form__input" data-validate-field="tel" type="tel" name="Телефон" placeholder="Ваш телефон" inputmode="text">
      <button class="btn-reset g-btn modal-form__btn">Вызвать</button>
</form>

Есть такая форма, нужно сделать её валидацию какой плагин для этого можно использовать, важно чтобь в нём был параметр при ошибки формы, чтобы можно было добавить классы при ошибки формы.

Answer 1

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

Классный плагин HandMadeOnJS, вот пример его работы:


У вас написано:
Дмитрий @WafelT
HTML/CSS/JavaScript - и с таким стеком знаний не можете валидацию написать?

P.S. С праздниками!

Comments

[Дмитрий]

Наверняка можно, но я ленивый просто, 20% усилий 80% результата.

Спасибо большое!
С праздниками!

Answer 2

[zkrvndm]

Атрибут pattern и псевдо классы :valid :invalid в помощь.

htmlbook.ru/html/input/pattern
https://developer.mozilla.org/ru/docs/Web/CSS/:invalid

Answer 3

[4X_Pro]

Это называется «угадайте, plugin для чего имел в виду автор».
По существу — без всяких plugins помогут HTML-атрибуты pattern и required. В pattern нужно прописать регулярное выражение для проверки. А чтобы менять класс формы, нужно навесить на inputы обработчики события invalid. То есть получится что-то вроде:

<input class="g-input modal-form__input" data-validate-field="tel" type="tel" name="Телефон" placeholder="Ваш телефон" inputmode="text" required pattern="+[0-9]{10,12}" oninvalid="this.form.classList.add('error-class')">