В отличии от библиотеки Bootstrap CSS, которая включает в себя готовое решение, позволяющее переопределить стандартные сообщения браузера при валидации формы, у библиотеки Tailwind CSS, на первый взгляд, нет такого решения, т.к. в документации Tailwind нет отдельного раздела, посвящённого валидации форм, во всяком случае на момент написания этой статьи.
Тем не менее, Tailwind позволяет красиво решить эту задачу и это решение является даже более гибким.
<form id="feedback">...</form>
group
:<form id="feedback" class="group">...</form>
novalidate
:<form id="feedback" class="group" novalidate>...</form>
peer
:<form id="feedback" class="group" novalidate>
<input type="email" name="email" class="peer" required />
</form>
<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-...
необходимы для того, чтобы подсказка появилась только после попытки отправки формы и при неверном заполнении поля.
<script type="module">
const form = document.getElementById('feedback');
form.addEventListener('submit', (event) => {
form.classList.add('validate');
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
});
</script>