Как создать всплывающий лейбл поля ввода с HTML5 валидацией

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

Что нам нужно сделать

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

Вы можете воспользоваться вашей любимой библиотекой JQuery. Но еще круче будет vanilla JavaScript. Вам нужно добавить чуть больше разметки, изменить стили некоторых элементов… добавить пару правил JS валидации, соединить JS с сервером через AJAX. Вам придется побиться головой об клавиатуру, так как вы не уложитесь в несколько месяцев, и вам придется разбираться, как работает новая JavaScript библиотека по валидации… и т.д.

Общая картинка у вас сложилась, не так весело. А что если можно пропустить весь JS и делать проверку только с помощью HTML5 атрибутов и CSS?

Что такое HTML5 валидация формы?

Грубо говоря: вы добавляете атрибуты required или type=»email» к input, а браузер делает все остальное. Попробуйте отправить данные из пустой формы ниже в CodePen демо, а потом попробуйте отправить форму с неверным форматом почты:

Regex шаблоны

Вы, возможно, заметили, что в поле можно просто ввести адрес типа a@a. Понятно, что вы хотите, чтобы поле принимало только настоящие e-mail адреса. Задав точный шаблон, мы сможем контролировать вводимые данные. Давайте создадим шаблон, который должен содержать точку и два/три символа на конце. Сделать это можно с помощью атрибута pattern и regex.

Если вы уже знакомы с регулярными выражениями, можете пропустить данную часть. Regex очень мощный инструмент, который есть в каждом языке программирования.

Я плохо понимаю сложные регулярные выражения, поэтому загуглил «email regex» (я был уверен, что данную проблему уже решили за нас) и нашел regular-expressions.info. Ниже записано наше regex выражение с сайта regex101.com (очень полезный ресурс для теста регулярок).

Если вы немного читали об этом шаблоне, то поймете, почему автор исключил нижний регистр – ожидается, что вы будете использовать регистронезависимый флаг. HTML5 input шаблоны не принимают флагов, поэтому для добавления символов в нижнем регистре нам необходимо добавить диапазон как в верхнем, так и в нижнем регистре (т.е. A-Za-z). Понять, за что отвечает каждая из частей шаблона можно на панели справа.

Чтобы наша форма могла отображать понятные ошибки, а не просто «неверный формат!», мы добавим атрибут title, в который будет записываться ошибка:

Попробуйте ввести адрес почты в демо ниже:

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

И не забывайте, что не все браузеры поддерживают различные атрибуты валидации. К примеру, в Firefox не поддерживается minlength, а pattern довольно неплохо себя чувствует, т.е. вы всегда можете продублировать функционал. minlength можно продублировать с помощью pattern=».{3,}», где 3 это минимальная длина.

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

Мгновенные уведомления

Было бы неплохо, если бы наша форма как-то показывала правильность введенных данных? К нашему счастью есть CSS селектор :valid. Также есть и селектор :invalid. Введите свое имя в демо ниже:

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

Мы могли бы схитрить и добавить новый псевдокласс :placeholder-shown, как в демо ниже, однако у него ужасная поддержка, а современных полифилов на замену ему еще нет.

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

Доведем демо до совершенства

Больше всего в данном способе мне нравится, что мы имеем полный CSS контроль над любым элементов формы. Добавив после input тег span, мы получаем доступ к тексту после элемента с классом .empty. После этого можно создать мнимый плейсхолдер, который будет красиво отъезжать вверх после заполнения формы. Пример:

Если span под input вам не нравится, или он не достаточно доступен, вы всегда можете использовать JS, который будет добавлять пустой класс к тегу label. Нужно будет немного переписать CSS код. Ниже пример этой техники:

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

Поддержка

Возможный недостаток

Нельзя стилизовать сообщение о проверке. В браузерах данная возможность отключена. Я не думаю, что это плохо, т.к. люди бы воспользовались этими стилями. Возможно, именно поэтому браузеры решили отрубить доступ к ним. Сейчас же они стандартизированы.

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

Автор: Cory Simmons

Источник: //webdesign.tutsplus.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: