Когда появился HTML5, веб-разработчики повсюду обрадовались. У нас появилось множество приятных новых тегов, таких как <nav>, <header> и <section>, не говоря уже о совершенно революционных вещах, таких как <canvas> и <audio>. А еще есть LocalStorage, GeoLocation и, подождите, что? … проверка формы?! ОМФГ!
Хорошее обещание проверки формы HTML5
Это все изменит! Больше никаких сумасшедших функций JavaScript для выполнения всех проверок на стороне клиента. Хотите сделать поле обязательным? Просто добавьте атрибут required к вашему элементу. Вы также можете делать такие вещи, как проверка действительных адресов электронной почты или даже сопоставление регулярных выражений, просто декларативно добавляя атрибуты к самому тегу. О-о-о-о!
Жестокая, жестокая ложь проверки формы HTML5
Поэтому, естественно, вы предположили бы, что результаты этих проверок каким-то образом можно использовать для стилизации ваших форм. И, вы были бы неправы.
Действительно, существует псевдоселектор :invalid, который динамически добавляется к каждому недопустимому полю всякий раз, когда его состояние недопустимо. Например, когда ваша страница впервые загружается и ни одно из обязательных полей еще не заполнено. Разве это не то, что вы хотели? Чтобы ваша страница изначально грузилась морем недействительных полей с ярко-красными рамками, пока пользователь не «исправит» все ошибки? Да, нет. Возможно нет.
Как бы это работало в идеальном мире?
На это действительно нетрудно ответить. И это сбивает с толку, что создатели этой спецификации не продумали ее достаточно хорошо, чтобы сделать ее действительно пригодной для использования. В идеале изначально все поля НЕ будут считаться недействительными. Селектор :invalid будет применяться только после попытки отправки формы или, возможно, когда поле получает событие blur. Затем, когда пользователь исправляет неверный ввод, он должен снова стать действительным. Дух.
Как это сделать
Небольшой фрагмент кода JavaScript можно использовать для прослушивания invalid события (вместо того, чтобы просто применять текущее состояние), а затем соответственно добавлять или удалять класс .invalid. Для этого требуется всего около 25 строк кода, и вам даже не нужно писать код самостоятельно, потому что очень умные (и потрясающе красивые) люди из CODEPILOT уже сделали это за вас и сделали его открытым исходным кодом.
Шаг 1: Установите autovalid: npm install autovalid
Шаг 2: Импортируйте и запустите: import autovalid from 'autovalid';
autovalid();
Теперь у вас есть прослушиватели для всех ваших элементов <input>, <select> и <textarea>, а класс .invalid будет добавляться и удаляться автоматически в соответствии с событиями проверки HTML5. Затем вы можете стилизовать свою форму по своему вкусу. Хороший!
Бонусные .invalid занятий
Хорошо, когда эти классы применяются к самому недопустимому элементу поля формы. Но если вы из тех, кто любит оборачивать свои входные данные в соответствующие теги <label> вот так…
<label> First Name <input type="text" name="firstName" required /> </label>
…тогда ваш тег <label> также получит класс .invalid. Так же как и родительский тег <form>! У тегов ввода и метки будет удален класс, когда ввод станет действительным. Тег формы удалит класс, когда все поля допустимы. Это позволяет иметь сообщения для каждого поля или для всей формы, которые по умолчанию имеют значение display: none, и display: block, когда родителем является .invalid.
Удачной проверки!
Нужна разработка веб-сайта или мобильного приложения?
Я руковожу агентством разработки Codepilot здесь, в Сан-Франциско. Мы создаем полностью индивидуальные веб-приложения и мобильные приложения в соответствии с точными спецификациями клиента. Нужна помощь с проектом? Свяжитесь с нами!
