Народ, всем привет. Сегодня мы поговорим про валидацию форм. Кто не в круче, это такой процесс проверки правильности введённых пользователем данных перед их отправкой на сервер. Традиционно для этой задачи часто использовался JavaScript, позволяющий задавать правила, показывать сообщения об ошибках и предотвращать отправку формы при несоответствии данных. Однако с развитием стандартов HTML5 появилась возможность реализовывать базовую валидацию прямо средствами HTML, без написания скриптов.
Одним из ключевых преимуществ HTML5 является наличие встроенных атрибутов для проверки данных. Например, атрибут required указывает, что поле обязательно для заполнения. Если пользователь попытается отправить форму, не заполнив такое поле, браузер автоматически покажет сообщение об ошибке и не отправит данные, пока условие не будет выполнено.
<form>
<label>Имя:
<input type="text" name="name" required>
</label>
<input type="submit" value="Отправить">
</form>
Для проверки формата данных предусмотрен атрибут type. Так, если указать type="email", браузер проверит, чтобы в поле был введён текст, соответствующий формату адреса электронной почты (с символом @ и доменной частью). Аналогично, type="url" проверяет, что введённый текст является корректным адресом сайта, а type="number" позволяет ввести только числа и может быть дополнен атрибутами min, max и step для задания диапазона и шага значений.
<form>
<label>Email:
<input type="email" name="email" required>
</label>
<label>Сайт:
<input type="url" name="website">
</label>
<input type="submit" value="Отправить">
</form>
Если необходимо проверить данные по более сложному шаблону, можно использовать атрибут pattern, который принимает регулярное выражение. Например, чтобы убедиться, что пользователь ввёл только буквы, можно задать pattern="[A-Za-z]+". Если введённый текст не будет соответствовать этому шаблону, браузер выдаст стандартное сообщение об ошибке.
<input type="text" name="latin" pattern="[A-Za-z]+" required>
Хотите знать больше? Читайте нас в нашем Telegram – там еще больше интересного: новинки гаджетов, технологии, AI, фишки программистов, примеры дизайна и маркетинга.
HTML5 также поддерживает атрибуты для ограничения длины вводимого текста — minlength и maxlength. Они полезны, например, при создании полей для паролей, где минимальное количество символов повышает безопасность, а максимальное — предотвращает чрезмерный объём данных.
<input type="password" name="pass" minlength="6" maxlength="12" required>
Ещё одна полезная возможность — автоматическая проверка диапазонов дат и времени через элементы input с типами date, time, datetime-local, month и week. Здесь можно задавать минимальные и максимальные значения с помощью атрибутов min и max, а браузер не позволит выбрать недопустимый вариант.
<input type="number" name="age" min="18" max="65" step="1" required>
Плюсом встроенной валидации является то, что браузер сам управляет отображением сообщений об ошибках и предотвращает отправку некорректной формы, не требуя дополнительного кода. При этом внешний вид этих сообщений зависит от конкретного браузера и операционной системы, что стоит учитывать при проектировании интерфейса.
Однако встроенная валидация HTML5 имеет ограничения. Во-первых, она не заменяет серверную проверку — данные всё равно нужно перепроверять на стороне сервера, чтобы защититься от попыток отправить некорректную или вредоносную информацию напрямую. Во-вторых, дизайн сообщений об ошибках и их текст трудно полностью кастомизировать без JavaScript и CSS.
Чтобы отключить встроенную валидацию, можно использовать атрибут novalidate в теге <form>. Это бывает полезно, если требуется полностью собственная логика проверки. Также можно добавлять атрибут formnovalidate к конкретной кнопке отправки, чтобы исключить валидацию при её нажатии.
<form novalidate>
<input type="email" name="email">
<input type="submit" value="Отправить">
</form>
<form>
<input type="email" name="email" required>
<button type="submit" formnovalidate>Отправить без проверки</button>
</form>
В итоге, валидация форм средствами HTML5 без JavaScript это просто способ обеспечить, скажем так, базовую проверку данных, ну и упростить разработку. Она идеально подходит для простых форм и в качестве первого уровня защиты данных, но все же при более сложных сценариях всё же часто дополняется кастомными проверками с использованием JavaScript или серверных языков.
Если Вам нравятся наши статьи, и вы хотите отблагодарить автора (на развитие канала), нам будет очень приятно!