Валидация форм в html5.

Количество просмотров: 852

Раньше для валидации форм на стороне клиента использовался javascript, однако с приходом html5 ситуация немного изменилась. Появились атрибуты позволяющие валидировать форму без javascript. Рассмотрим данные атрибуты и принцип их работы, а так же зачем вообще нужна проверка форм.

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

 

В html5 добавили относительно надежный механизм валидации полей, который основан на использовании новых атрибутов у тега input. Познакомимся с ними и попробуем применять на практике.

Но для начала создадим простую форму содержащую в себе несколько полей: Имя, Телефон, E-mail и кнопку отправить.

<form>
<label><p>Ваше имя</p>
<input type="text" name="name">
</label><br>
<label><p>Ваш телефон</p>
<input type="text" name="phone">
</label>
<label><p>Ваше e-mail</p>
<input type="text" name="email">
</label><br>
<input type="submit" value="Отправить">
</form>

Вот она самая простая и не красивая форма, поля которой подразумевают что поле имя - будет введен текст, в поле телефон - телефон(т.е. только цифры) и поле e-mail в которое можно ввести как буквы так и цифры, но с одним условием, там должен присутствовать символ @. Теперь посмотрим как html5 позволит нам справиться с задачей и провалидировать данную форму.

Атрибут required.

Данный атрибут у тега input устанавливает обязательное заполнение поля.

<input required>

По умолчанию данный атрибут выключен, давайте добавим его к полям нашей формы и посмотрим как она будет себя вести.

Теперь при попытке отправки формы появляется сообщение о необходимости заполнить обязательное поле и данное поле подсвечивается красным. Если все обязательные поля заполнены, то форма успешна отправляется. Хорошо, но недостаточно.

Атрибут type.

Данный атрибут добавляет стандартные способы валидации для полей. Для поля почты изменим значение на type="email" а для телефона type="tel"

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


<form>
<label><p>Ваше имя</p>
<input type="text" name="name" required>
</label><br>
<label><p>Ваш телефон</p>
<input type="tel" name="phone" required>
</label>
<label><p>Ваше e-mail</p>
<input type="email" name="email" required>
</label><br>
<input type="submit" value="Отправить">
</form>

Теперь если в поле введены не верные значения, например в поле email введен просто текст без собаки, то при попытке отправки появляется предупреждающее окно и форма не отправляется. Хорошо, но все еще недостаточно.

Атрибут pattern.

Данный атрибут указывает регулярное выражение, согласно которому будут проверяться введенные данные в форму.

Например для имени - <input type="text" pattern="[A-Za-zА-Яа-яЁё]{2,15}">

Добавим данный атрибут для каждого поля формы указав соответствующее регулярное выражение.

Телефон - <input type="tel" name="phone" required pattern="^((8|\+7)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{7,10}$">

Заключение.

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

Помимо этого полезно будет знать, если у формы поставлен атрибут <form novalidate> то валидация полей будет отключена. Не забывайте про это.

Успехов!

© 2015-2018 Goodweb.me --- Карта сайта --- info@goodweb.me

Наверх