Понимание того, что такое проверка формы HTML5 и плавающая метка ввода

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

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

В течение многих лет мы использовали сложный и TL;DR (т.е. слишком длинный; не читал) код JavaScript для реализации проверки формы на стороне клиента. К счастью, с выпуском «проверки формы HTML5» теперь мы можем добавлять проверки в форму с минимальным количеством JavaScript.

Хотя последняя версия HTML-версии предлагает несколько преимуществ, наиболее важным из них является то, что она поставляется с множеством новых полей ввода и атрибутов, необходимых для проверки формы без необходимости написания сложного кода проверки JS (сокращение от JavaScript).

Но помните, что пользователи могут легко разочароваться при заполнении формы, особенно когда они узнают, что данные, которые они ввели, были неверными, могут усилить их разочарование в большей степени. Но благодаря HTML5 добавление плавающих меток ввода может проверять данные формы одновременно с ее заполнением пользователями. Таким образом, пользователи сразу узнают, если они допустили какую-либо ошибку в полях ввода.

Например, ниже представлено изображение, размещенное на Dribble Мэттом Смитом, которое демонстрирует, как работает шаблон плавающей метки при применении к форме:

В этом посте рассказывается, как реализовать плавающие метки ввода при добавлении проверок в форму HTML5.

Но прежде чем начать

Большинство из вас, возможно, захотят сначала узнать о процессе проверки формы HTML5. В конце концов, не у всех из вас может быть опыт написания кода проверки для формы HTML5. Кроме того, возможно, вы не будете знать о недавно введенных полях ввода и атрибутах в HTML5.

Подробный обзор проверки формы HTML5

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

Одной из замечательных возможностей HTML5 является то, что он помогает реализовать проверку на стороне клиента, не завися от сценариев. Скорее вы можете выполнить такую ​​задачу, используя «атрибуты проверки» в элементах формы. Самое главное, вам просто нужно добавить «обязательный» атрибут для поля ввода, а обо всем остальном позаботится ваш браузер.

Вот пример, объясняющий использование обязательного атрибута для добавления проверки в поле ввода:

Name: <input type="text" name="yourname" required>

Вышеупомянутая строка кода сообщает вашему браузеру, что поле ввода имени должно рассматриваться как обязательное (т. е. его нельзя оставлять пустым).

Как видите, в текстовом поле, соответствующем полю ввода «Ваше имя», отображается красный маркер. Но как только какой-либо текст вводится в поле ввода имени, маркер превращается в галочку, указывающую, что введенное значение допустимо.

Помимо <input type="text">(например, типов ввода текста), HTML5 теперь поддерживает несколько новых параметров ввода, таких как поиск, электронная почта, телефон, дата и время и т. д. Проще говоря, с помощью HTML5 мы можем написать следующую строку кода:

<input type="text" name="email">

во что-то вроде:

<input type="email" name="email">

Настольные браузеры будут отображать приведенный выше код так же, как любое стандартное текстовое поле.

Еще одна важная вещь, которую я хотел бы обратить ваше внимание на то, что: когда вы пытаетесь ввести атрибуты, такие как обязательный или тип ввода = «электронная почта» в демо-версии CodePen, даже без какого-либо содержимого, вы все равно получите сообщение об ошибке. сообщение при нажатии на кнопку «ОТПРАВИТЬ» без действительного адреса электронной почты:

В примере, который мы обсуждали выше, вы можете видеть, что браузер по умолчанию отображает сообщение об ошибке. Но что, если вы хотите применить свое собственное (т.е. пользовательское) правило проверки к входному значению? Здесь пригодится шаблон Regex.

Понимание шаблонов регулярных выражений

Возможно, вы видели шаблоны при вводе адреса электронной почты, такого как abc@a. Излишне говорить, что вы хотели бы, чтобы ваши пользователи вводили реальный адрес электронной почты. И, указав свой собственный выбор шаблона, который соответствует вашим данным, поможет проверить введенное значение. Например, вы можете убедиться, что письмо соответствует шаблону, содержащему три или более символов в конце. Для этого вам потребуется использовать «Атрибут шаблона» и регулярные выражения (RegEx).

RegEx — это в основном язык, который используется для анализа или управления текстом. Чаще всего регулярные выражения используются для выполнения сложных операций (таких как поиск и замена) для лучшего формирования текстовых данных. Сегодня вы можете найти использование регулярных выражений почти во всех языках программирования и сценариев. RegEx можно использовать для проверки данных, введенных в поля формы, применяя их к типам ввода с использованием атрибута шаблона следующим образом:

<input id="phone" placeholder="111-111-1111" title="Text to convey pattern for telephone number" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

Кроме того, если возникают какие-либо ошибки проверки, вы можете определить атрибут заголовка вместе с ошибкой проверки, чтобы выдать сообщение помимо «Неверный формат!» используя приведенную ниже строку кода:

<input type="email" placeholder="Email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,}$" title="Kindly enter a valid email address here.">

Имейте в виду, вам не нужно писать какой-то абсурдный шаблон для каждого ввода. Вместо этого во многих случаях вам просто нужно назначить требуемый атрибут для определенного типа данных. Например, число больше 8 будет выглядеть так:

<input type="number" min="8" required>

Кроме того, имейте в виду, что не все браузеры поддерживают все доступные атрибуты проверки. Возьмем, к примеру, браузер Firefox, не совместимый с шаблоном «minlength».

Преимущество использования проверки формы HTML5

Самым большим преимуществом реализации проверки формы HTML5 является мгновенная обратная связь. В основном, когда пользователи заполняют какое-либо поле в форме, будет выделено своего рода указание, чтобы сообщить им, было ли введенное значение действительным или нет.

Теперь, когда вы вводите что-то в текстовое поле, цвет границы меняется на зеленый следующим образом:

Однако, как видите, у такого подхода есть и обратная сторона. Даже при добавлении недопустимого (или неполного) значения в поле «Имя» пользователь получает указание на правильность значения. Возможно, вы можете подумать о добавлении :invalid:not(:empty)в код. К сожалению, такая логика не будет работать с браузерами, так как они обычно считают элементы формы пустыми.

Хотите знать, что делать?

Вы можете попробовать добавить в код новый псевдоселектор с именем «:placeholder-show» следующим образом:

<form>
  <label>
    <span>First Name</span>
    <input type="text" pattern=".{4,}" placeholder=" " required title="Enter at least 4 characters.">
  </label>
 
  <button>Submit</button>
 
</form>

Но большинство браузеров, по-видимому, не обеспечивают поддержку показанного заполнителя, поэтому вам лучше написать скрипт для переключения класса, когда поле ввода пусто или нет. Вот код JavaScript для того же самого:

$('input:empty, textarea:empty').addClass('empty');
 
$('input').keyup(function() {
 
  if ($(this).val().trim() !== '') {
 
    $(this).removeClass('empty');
 
  } else {
 
    $(this).addClass('empty');
 
  }
 
});

ПРИМЕЧАНИЕ. Не забудьте удалить элемент-заполнитель из HTML-разметки выше.

Теперь, когда вы запустите приведенный выше фрагмент кода вместе с разметкой HTML5, вывод будет выглядеть так:

Как видите, цвет текстового поля остается красным до тех пор, пока проверка, примененная к полю, не будет выполнена. При нажатии на «Отправить» отображается сообщение об ошибке при вводе неполного имени.

Но, как только пользователь вводит полный (более 3 символов), цвет границы текстового поля меняется на зеленый.

Как добавить плавающую метку ввода в HTML5?

А теперь давайте обсудим подход к добавлению плавающей метки ввода при проверке формы HTML5. Это помогает улучшить внешний вид формы. Вот разметка HTML.

Чтобы реализовать шаблон плавающей метки, вам нужно поместить тег прямо под <input>элементом в HTML-разметке:

<form>
 <label>
<input type="text" pattern=".{4,}" required title="Characters should not be less than 4.">
    <span>Your Name</span>
  </label>
 <label>
 <input type="email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,}$" title="Please enter a valid email.">
    <span>Your Email</span>
  </label>
  <button>Submit</button>
 
</form>

CSS будет выглядеть примерно так:

label {
  position: relative;
  display: inline-block;
}
label span {
  position: absolute;
  left: 20px;
  top: -2em;
  font-size: .75em;
  cursor: text;
  color: #f27853;
  transition: all 150ms ease;
}
input {
  border: 1px solid #f2f2f2;
  outline: none;
}
input:focus {
  border-color: #d9d9d9;
}
input:valid {
border-color: #42d142;
}
input:invalid {
  border-color: #ff8e7a;
}
input.empty {
  border-color: #d9d9d9;
}
input.empty + span {
 top: 50%;
 transform: translateY(-50%);
  font-size: 1em;
  background: none;
  color: #cccccc;
}
body {
  display: flex;
  min-height: 100vh;
  background: #f1f1f1;
  font-family: 'Lato', sans-serif;
  font-size: 150%;
}
form {
  margin: auto;
}
 
input, button {
  padding: 15px 20px;
  border-radius: 1px;
  border: 2px solid #bdbdbd;
}
 
button {
  border-color: #363636;
  background: #363636;
  color: #FFFFFF;
}

И, наконец, напишите код JavaScript:

$('input:empty, textarea:empty').addClass('empty');
$('input').keyup(function() {
  if ($(this).val().trim() !== '') {
    $(this).removeClass('empty');
  } else {
    $(this).addClass('empty');
  }
});

Выход:

Вы можете реализовать несколько эффектов при использовании плавающих меток ввода в HTML5, например:

• Добавляйте значки с эффектом постепенного появления/исчезновения при проверке формы HTML5.
• Встряхните ввод, если введенные данные недействительны.
• Сделайте цвет входных данных тусклым, когда они заполнены правильно.

Что следует учитывать

При работе над внедрением проверок в форму HTML5 вам необходимо знать:

1. Поддержка браузеров: формы HTML5 отлично работают в современных браузерах и IE10+. Хотя версия IE 9 и более ранние версии не поддерживают псевдоселекторы проверки, которые не позволяют вам стилизовать форму, она все равно будет работать правильно.
2. Предостережение: одна вещь, которую вы не можете выполнить при применении проверок к форме HTML5, — это стилизация сообщений проверки. Это потому, что такая функциональность отключена браузерами.

Заключительные слова

Внедрение проверки формы имеет решающее значение для добавления дополнительного уровня безопасности на ваш сайт. Это связано с тем, что он не позволяет недобросовестным пользователям добавлять вредоносный текст в качестве значения в поля вашей формы. Кроме того, мгновенная обратная связь с пользователями, когда они вводят какие-либо данные в поле проверенного ввода формы, поможет улучшить их работу. Ведь им не придется тратить время на то, чтобы признать, что они допустили ошибку при заполнении формы. Но проверка формы с использованием только JavaScript может быть сложной задачей. Здесь вам на помощь приходит проверка формы HTML5.

При применении проверок к форме с использованием HTML5 вам не нужно писать длинные строки сложного кода JS. Вместо этого вы можете реализовать правила проверки формы с минимальным кодированием JavaScript. Что наиболее важно, многие новые функции доступны с проверкой формы HTML5, такие как плавающая метка ввода, которая делает форму великолепной, побуждая пользователей выполнять отправку формы.