Валидация формы посредством Tailwind CSS

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

Тем не менее, Tailwind позволяет красиво решить эту задачу и это решение является даже более гибким.

Решение

1. Назначаем форме уникальный идентификатор:

<form id="feedback">...</form>

2. Добавляем к форме класс group:

<form id="feedback" class="group">...</form>

3. Добавляем к форме атрибут novalidate:

<form id="feedback" class="group" novalidate>...</form>

4. Добавляем к каждому полю, требующему валидации, класс peer:

<form id="feedback" class="group" novalidate>
  <input type="email" name="email" class="peer" required />
</form>

5. После каждого поля, требующего валидации, добавляем пользовательскую подсказку:

<form id="feedback" class="group" novalidate>
  <input type="email" name="email" class="peer" required />
  <div class="hidden group-[.validate]:peer-invalid:block">
    Укажите правильный Email-адрес
  </div>
</form>

Классы hidden и group-... необходимы для того, чтобы подсказка появилась только после попытки отправки формы и при неверном заполнении поля.

6. Добавляем JavaScript-обработчик формы, активирующий подсказки для неверно заполненных полей:

<script type="module">
  const form = document.getElementById("feedback");
  form.addEventListener("submit", (event) => {
    form.classList.add("validate");
    if (!form.checkValidity()) {
      event.preventDefault();
      event.stopPropagation();
    }
  });
</script>

Замена стандартных сообщений браузера при валидации формы посредством Tailwind CSS

Решение

Другие статьи