required true что значит

Валидация HTML5-форм

В этой статье, я собираюсь разобрать валидацию на примере простой формы заказа, используя Constraint API, сделав акцент на том, чтобы не снизить удобства использования.

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

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

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

Это отображается, когда поле ввода получает фокус, предоставляя контекстно-зависимую справку:

Чтобы провести валидацию этой формы, нам необходимо:

Обязательные поля

Если мы попытаемся отправить данную форму, не заполнив всех обязательных полей, браузер оповестит о необходимости это сделать:

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

Предупреждение: не все браузеры имеют поддержку атрибута required, поэтому в некоторых комбинациях « браузер/программа чтения с экрана » могут возникать ошибки. Поэтому, на данный момент лучшей практикой будет указание атрибута aria-required=”true” :

Валидация данных

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

Нам нужно, чтобы содержимое поля ‘Name’ имело формат ‘ Firstname Lastname ‘ и включало в себя только буквы и пробелы (в реальных сценариях, возможно, нужно будет принять во внимание и другие символы).

Этого можно достичь, добавив атрибут pattern к полю ‘Name’, установив его значение в виде регулярного выражения, которое описывает правило, которому должны соответствовать вводимые данные:

Вы можете помочь пользователю, использовав атрибут title, который подсказывает требуемый формат ввода:

Текст в атрибуте title затем присоединяется к встроенному валидационному сообщению:

Стоит заметить, что некоторые сочетания « программа чтения с экрана/браузер » могут привести к ситуации, когда значение атрибута title будет прочитано несколько раз, в дополнение к тексту атрибута aria-describedby, поэтому обратите на это внимание.

К примеру, я обнаружил, что использование программы NVDA с IE10 ведет к двойному прочтению: как атрибута title, так и aria-describedby. Однако NVDA с Chrome и Firefox ведет себя совершенно нормально – читается только текст атрибута aria-describedby.

Далее, мы рассмотрим этот вопрос и покажем решение с использованием CSS3.

Валидация email, URL и номеров

Чтобы убедиться, что пользователь ввел верные данные в поля email, website и number of tickets, мы можем использовать новые элементы ввода, появившиеся в HTML5:

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

Также заметим, что атрибут type больше не является обязательным. Если вы явно не укажете тип элемента ввода, то по умолчанию он будет равен type=»text».

Предположим, что мы хотим ограничить число билетов, которое может купить один человек. Это можно реализовать, используя атрибуты max и min :

Если пользователь введет число меньшее 1 или большее 4, то выведется сообщение о том, что диапазон ввода ограничен.

Использование CSS для подсветки обязательных полей и неверно введенных данных

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

Селекторы обязательных полей могут использовать псевдокласс :required :

А дополнительные – псевдокласс :optional :

Успешное или неудачное прохождение процедуры валидации может показываться пользователю с помощью псевдоклассов :valid, :invalid, :in-range и :out-of-range :

Ранее, я заметил, что определенные сочетания « программа чтения с экрана/браузер » ведут к двойному прочтению атрибутов title и aria-describedby.

Что ж, одним из способов обойти это препятствие является удаление атрибута title из тега элемента ввода и использование CSS3-псеводкласса :invalid, чтобы показать текст атрибута aria-describedby:

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

После всех манипуляций HTML-код должен выглядеть так:

Отключение встроенной в браузер валидации

Вы можете отключить встроенную в браузер валидацию, добавив атрибут novalidate к тегу

Кроссбраузерность

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

Плохая же новость заключается в частичной поддержке в настольной версии Safari и её отсутствии во всех браузерах iOS Safari и в стандартных браузерах для Android. Если вам нужна поддержка старых версий IE (ниже версии 10), то там вы ее также не обнаружите.

Что же можно сделать, если требуется поддержка браузеров, которые не имеют встроенных средств валидации?

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

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

Третий подход подразумевает использование JavaScript для обнаружения поддержки валидации форм в браузере, и, если таковая имеется, то использовать её; в противном же случае обратиться к JavaScript-валидации.

Библиотеки наподобие Modernizr могут помочь обнаружить поддержку HTML5, но вы всегда можете написать собственный код, если не хотите подключать стороннюю JavaScript-библиотеку:

Заключение

В этой статье мы обзорно изучили использование HTML5-валидации форм на стороне клиента, приведя пример её применения в форме заказа, и при этом мы не пользовались средствами JavaScript.

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

Также, было рассмотрено использование новых CSS3-псеводклассов для отображения визуальных подсказок о том, какие поля обязательны к заполнению, а какие нет, какие поля заполнены правильно, а какие — нет.

Наконец мы поговорили об отключении HTML-валидации форм и обнаружении поддержки этой возможности в различных браузерах.

Источник

HTML5 атрибуты форм (часть 1)

Дата публикации: 2017-03-09

От автора: данная статья является выдержкой из книги HTML5 и CSS3 для реального мира, 2-е издание за авторством Алексиса Гольдштейна, Луи Лазариса и Эстель Вейль. Книгу можно найти в магазинах по всему миру, а также купить цифровую версию.

Атрибут required

Булев атрибут required говорит браузеру, что форму можно отправить только при заполнении этого поля. То есть поле не может быть пустым. Однако это также значит, что поле может поддерживать только заданные типы значений. Далее в этой главе мы расскажем про разные способы установки определенных типов данных для формы.

Если обязательное поле пустое, форма не отправится. Opera, Firefox, Internet Explorer 10+ и Chrome выдают пользователю сообщение с ошибкой. Например, «пожалуйста, заполните это поле» или «необходимо указать значение».

Заметка: пора сосредоточиться

Пора освежить память: элемент формы получает фокус по клику на поле мышкой, касанию поля пальцем на устройстве с тачскрином, нажатию клавиши tab на клавиатуре, а также по клику или касанию на лейбл, привязанный к этому элементу формы. В полях input ввод с клавиатуры забивает данные в сам элемент.

По терминологии JS событие focus срабатывает на элементе, когда он получает фокус, а событие blur запускается при потере фокуса.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

В CSS для стилизации элементов с фокусом можно использовать псевдокласс :focus.

Атрибут required подходит для любых типов полей кроме button, submit, image, range, color и hidden. У всех этих типов есть значение по умолчанию, поэтому данный атрибут здесь лишний. Как и с другими Булевыми атрибутами, синтаксис простой: required или required=»required» на XHTML.

Добавим атрибут required в форму регистрации. Сделаем обязательными поля имя, email, пароль и начальная дата оформления подписки:

Заметка: улучшаем доступность

Для улучшения доступности можно добавить WAI-ARIA атрибут aria-required=»true». Большая часть браузеров и скрин ридеров уже имеют встроенную поддержку атрибута required, так что скоро WAI-ARIA атрибут станет не нужен. Краткое введение в WAI-ARIA смотрите в Приложении В.

На рисунках 4.1, 4.2 и 4.3 показано поведение атрибута required при попытке отправить форму.

Рисунок 1 сообщение о проверке обязательного поля в Firefox

Рисунок 2 сообщение в Opera

Рисунок 3 и в Google Chrome

Стилизация обязательных полей формы

Обязательные поля формы можно стилизовать через псевдокласс required, необязательные поля через псевдокласс optional (или с помощью отрицательного псевдокласса :not(:required)). Также можно стилизовать валидные и невалидные поля с помощью :valid и :invalid. Эти псевдоклассы и немного CSS магии подскажут зрячим пользователям, какие поля обязательны, а также сообщат об успешном вводе данных:

Мы добавим фоновое изображение (звездочку) к обязательным полям формы. Использовать сгенерированный контент на полях input не получится, он заменяется на пустые элементы. Поэтому мы добавим фоновое изображение. Также добавим разные фоновые изображения для валидных и невалидных полей. Изменения будут видны только при получении элементом фокуса, чтобы не загромождать форму.

Предупреждение: Firefox применяет стили к невалидным элементам

Обратите внимание, что Firefox применяет свои стили к невалидным элементам (красная тень). Посмотреть пример можно на рисунке 1 выше. Возможно, вы захотите избавиться от нативной тени с помощью CSS:

Совет: таргетированные стили для старых браузеров

Старые браузеры типа IE8 и IE9 не поддерживают псевдокласс :required, но можно использовать таргетированные стили с помощью селектора с атрибутом:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Этот атрибут можно использовать как хук для валидации форм в браузерах без поддержки HTML5 валидации форм. JS код может проверять инпуты без значений на наличие атрибута required и не отправлять форму, если таковой найден.

Атрибут placeholder

Атрибут placeholder позволяет отображать небольшую подсказку (если таковая имеется) внутри поля формы, которая будет говорить пользователю, какой тип данных принимается данным полем. Текст плейсхолдера пропадает, когда поле получает фокус, и пользователь ввел хотя бы один символ. Подсказка появляется снова, когда значение становится null. Разработчики уже много лет пользовались похожим функционалом на JS. Добавлялось временное значение, которое по фокусу очищалось. Сейчас же HTML5 атрибут placeholder позволяет сделать это нативно без подключения JS. Текст остается виден до тех пор, пока не будет введено значение.

В форме регистрации на сайте The HTML5 Herald мы добавим атрибут placeholder к полю URL и стартовой дате подписки:

В IE поддержка атрибута placeholder появилась только с версии 10. Текст подсказки исчезает, как только пользователь ввел данные. Поэтому не стоит полагаться только на такой способ информирования пользователей. Если подсказка не помещается в поле, опишите требования в атрибуте title данного поля, лейбле или рядом с полем. Многие советуют добавлять «например» в подсказку, чтобы точно дать понять, что это плейсхолдер, а не заполненные данные.

Все браузеры с Safari 4, Chrome 10, Opera 11.1, Firefox 4, Android 2.3 и Internet Explorer 10 поддерживают атрибут placeholder, хотя начальная имплементация placeholder удаляла текст при получении фокуса, а не при вводе текста.

Поддержка полифилов на JS

Как и все остальное в этой главе, атрибут placeholder не будет лишним даже в старых браузерах без поддержки.

Как с атрибутом required, атрибут placeholder и его значение можно использовать в старых браузерах. Однако для этого понадобится небольшой JS полифил.

Что нужно сделать: сперва с помощью JS определите браузеры без поддержки. Затем с помощью функции создайте ложный плейсхолдер. Функция должна определить, в каких полях есть атрибут placeholder, после чего временно взять из них контент и вставить его в качестве значения в атрибут value.

Далее необходимо настроить два обработчика событий: первый для очистки значения поля по фокусу, второй для замены значения placeholder по событию blur, если значение поля осталось пустым. Если хотите воспользоваться этим трюком, проверьте, чтобы значение атрибута placeholder не совпало с тем, что может вбить пользователь. Можете использовать приставку «например», чтобы дать понять, что плейсхолдер это просто пример, а не правильное значение. Не забудьте очистить ложный плейсхолдер при отправке формы. Или вы получите много “(XXX) XXX-XXXX подписок!

Рассмотрим пример кода на JS, который с помощью техники прогрессивного улучшения работает с элементами формы, у которых есть атрибут placeholder.

Первое, на что следует обратить внимание в этом скрипте – это то, что для определения поддержки атрибута placeholder мы используем JS библиотеку Modernizr. В Приложении А Modernizr описана более подробно. Сейчас же достаточно знать, что эта библиотека дает нам целый набор свойств с true и false для определенных HTML5 и CSS3 нововведений. Свойство, которое мы будем использовать, говорит само за себя. Modernizr.input.placeholder будет true, если браузер поддерживает placeholder, и false, если нет.

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

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

Перед добавлением кнопки сброса формы подумайте, а захотят ли ваши пользователи стереть все данные. Если ответ да, и вы добавите кнопку сброса, учтите, что после нажатия на reset ложные плейсхолдеры исчезнут, а класс placeholder останется, так как он используется в полифиле.

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

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

Автор: Alexis Goldstein, Estelle Weyl, Louis Lazaris

Источник: //www.sitepoint.com/

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Источник

Валидация форм на HTML и CSS

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

(Вы можете) сделать label похожим на placeholder

Я бы сказал, что если форма короткая и с понятным паттерном поведения (вход или регистрация), то вы можете сделать названия полей в виде плейсхолдеров, но используйте для этого реальные элементы label.

Вам не нужно хитро изворачиваться и беспокоиться об установке курсора в поле ввода, все уже сделано семантикой. Если пользователь нажимает на название поля — активируется поле ввода. Если нажимает на само поле — курсор устанавливается в поле ввода. Оба варианта верны.

Фишка в том, чтобы поставить поле ввода первым (семантически допустимо). Таким образом вы сможете скрывать label при фокусе:

Сделайте определенные поля обязательными

Пожалуй, самым простым способом проверки формы является использование атрибута required. Нет более быстрого пути отлова ошибок, кроме как позволить браузеру сделать это самому!

Подсвечивайте верно заполненные поля

Дайте пользователю знать, что поле было заполнено верно. Браузер может предоставить нам эту информацию по CSS-псевдоклассу :valid.

:valid в этом случае показывает, что выполнено условие required. Но селектор так же подойдет для проверки данных по типу поля.

Покажите напоминание о виде вводимых данных

Вы также можете установить определенное требуемое значение. Вроде email или number. Здесь перечислены все возможные варианты.

Это поле является обязательным для заполнения и вводимая информация будет проверяться на соответствие адресу электронной почты. Давайте улучшим UX:

Но еще… не показывайте никаких подсказок, если поле пустое. И не считайте его неверно заполненным. Это может создать ощущение назойливости и будет только раздражать. Для того, чтобы соблюсти эту рекомендацию, мы должны будем узнать, пустое поле или нет.

Проверяем заполнено поле или нет

Мы хотим провернуть фокус с :valid и :invalid, но мы не хотим опережать события и считать поле невалидным до того, как оно было заполнено.

Есть ли CSS-селектор для проверки пустоты поля? Вообще-то нет! Вы можете подумать на :empty, но ошибетесь. Этот псевдокласс предназначен для проверки ситуаций когда элемент

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

Трюк в том, чтобы проверить поле на видимость атрибута placeholder:

Мы не использовали плейсхолдер в нашем примере, но это правило сработает, если мы зададим значение из одного пробела:

:placeholder-shown супер полезен для нас! Это в целом секретный селектор, позволяющий проверить, есть ли в поле значение или нет.

IE и Firefox пока не поддерживают его, что немного осложняет задачу. Обычно спасителем является новая функция @ supports, но…

Вы не можете использовать @supports для селекторов, только для свойства/значения (например @supports (display: flex)).

Проверить плейсхолдер при помощи JavaScript довольно легко:

Но это не кажется самым простым способом имитации :placeholder-shown. Поэтому…возможно, просто стоит подождать поддержки всеми браузерами.

Представим, что поддержка уже повсеместная и посмотрим, как это будет выглядеть…

Вы можете создать более сильную проверку

Это уже не просто required или type=”email” (и подобные). Вы можете проверить на клиентской стороне такие вещи, как длину (например минимальную длину пароля или максимальное количество символов в textarea>) и даже использовать полноценное регулярное выражение.

Вот статья об этом. Скажем, вы хотите проверку пароля по параметрам:

Вы можете это сделать следующим образом:

Я оставил в этом примере :placeholder-shown, так что в Firefox и IE может работать не очень хорошо. Это просто пример! Не стесняйтесь брать по частям или менять под свои нужды.

P.S. Если вам понравилась эта статья — нажмите зеленое сердечко. Это много значит для меня. Спасибо!

Нашли ошибку? Воспользуйтесь функцией Private notes: выделяете текст с ошибкой, нажимаете на символ замка в появившемся дудле и оставляете свой комментарий. Спасибо!

Источник

Валидация форм на стороне клиента

Перед отправкой данных на сервер важно убедиться, что все обязательные поля формы заполнены данными в корректном формате. Это называется валидацией на стороне клиента и помогает убедиться, что данные, введённые в каждый элемент формы, соответствуют требованиям. Данная статья проведёт вас через основные концепци и примеры валидации на стороне клиента.

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

Однако, не следует рассматривать валидацию на стороне клиента как достаточную меру безопасности! Любые данные, отправляемые через форму, необходимо дополнительно проверять на безопасность и на стороне сервера, поскольку валидацию на стороне клиента достаточно просто обойти и она может не остановить злоумышленников. Чтобы лучше понимать потенциальные угрозы, рекомендуем ознакомиться с разделом Безопасность вебсайтов; валидация на стороне сервера выходит за рамки этого модуля, но о ней следует помнить.

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

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

Это называется валидацией формы. По мере ввода, браузер и/или сервер проверяют данные, чтобы определить, соответствуют ли они требуемому формату. Валидация, выполняемая в браузере, называется валидацией на стороне клиента, а выполняемая на сервере — валидацией на стороне сервера. В этом разделе мы сосредоточимся на валидации, выполняемой на стороне клиента.

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

Мы хотим максимально упростить заполнение веб-форм. Тогда почему мы настаиваем валидации данных? На это есть три основные причины:

Предупреждение:: Никогда не доверяйте данным, передаваемым на сервер клиентской программой. Даже если ваша форма правильно валидируется и не допустит введение потенциально вредоносных данных на стороне клиента, злоумышленники по-прежнему могут изменить сетевой запрос.

Типы валидации на стороне клиента

Существует два типа валидации на стороне клиента, с которыми вы столкнётесь в Интернете:

Использование встроенной валидации форм

Одной из самых важных функций элементов форм HTML5 является способность валидировать бóльшую часть пользовательских данных без использования JavaScript. Это выполняется с помощью атрибутов валидации у элементов формы. Многие из них мы уже рассмотрели в этом курсе:

Если данные, введённые в поле формы, соответствуют правилам перечисленных выше атрибутов, они считаются валидными, если нет — не валидными

Когда элемент валиден, справедливы следующие утверждения:

Когда элемент не валиден, справедливы следующие утверждения:

Примеры встроенной валидации форм

В этом разделе мы протестируем некоторые из атрибутов, которые обсуждали выше.

Простой начальный файл

Для начала скопируйте файл fruit-start.html в новую папку на вашем жёстком диске.

Атрибут required

Обратите внимание на CSS, который включён в файл примера:

Данный CSS задаёт полю красную пунктирную рамку, когда оно не валидно, а когда валидно — сплошную чёрную. Мы также добавили фоновый градиент для обязательных не валидных полей. Проверьте новое поведение в примере ниже:

Примечание: Рабочий пример можно найти на GitHub по адресу fruit-validation.html (отдельно можно найти исходный код.)

Попробуйте отправить форму без введения значения. Обратите внимание, что не валидное поле получает фокус, появляется сообщение об ошибке («Заполните это поле») и блокируется отправка формы.

Примечание: Для повышения удобства взаимодействия указывайте пользователям, какие поля являются обязательными. К тому же, этого требует руководство по обеспечению доступности WCAG. Требуйте обязательного ввода только тех данных, которые вам действительно нужны: например, так ли важно знать пол или должность пользователя?

Валидация с помощью регулярного выражения

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

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

Давайте рассмотрим пример. Добавьте в атрибут pattern следующий шаблон:

Это даёт нам следующее обновление — опробуйте его:

Примечание: Рабочий пример можно найти на GitHub по адресу fruit-pattern.html (исходный код.)

В этом примере элемент принимает одно из четырёх возможных значений: строку «banana», «Banana», «cherry», или «Cherry». Регулярные выражения чувствительны к регистру, но с помощью шаблона «Aa», вложенного в квадратные скобки, мы сделали поддержку написания слова как с большой, так и с маленькой буквы.

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

Примечание: Элемент

Ограничение длины вводимых значений

Можно ограничить максимально допустимое количество символов для текстовых полей или

Ограничение допустимых значений

Давайте рассмотрим другой пример. Создайте новую копию файла fruit-start.html.

Содержимое элемента замените на:

Примечание: Рабочий пример можно найти на GitHub по адресу fruit-length.html (исходный код.)

Полный пример

Ниже представлен полный пример, демонстрирующий использование встроенного функционала валидации. Сначала немного HTML:

И немного CSS для стилизации HTML:

Примечание: Рабочий пример можно найти на GitHub по адресу full-example.html (исходный код.)

Валидация форм с помощью JavaScript

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

Constraint Validation API

Большинство браузеров поддерживают Constraint Validation API, который состоит из набора свойств и методов, доступных на DOM-интерфейсах следующих элементов форм:

Для перечисленных выше элементов Constraint Validation API делает доступными следующие свойства.

Также для перечисленных выше элементов Constraint Validation API делает доступными следующие методы.

Реализация кастомного сообщения об ошибке

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

У этих автоматических сообщений есть два недостатка:

Настройка таких сообщений об ошибках является одной из наиболее распространённых причин использования Constraint Validation API. Давайте рассмотрим простой пример, как это делается.

Начнём с простого HTML (Не стесняйтесь поместить это в пустой HTML-файл. Вы можете взять за основу свежую копию fruit-start.html, если хотите):

Добавьте на страницу следующий JavaScript:

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

Попробовать пример можно ниже:

Примечание:: Данный пример можно найти на GitHub по адресу custom-error-message.html (отдельно можно найти исходный код.)

Более подробный пример

Теперь, когда мы разобрали простой пример, давайте посмотрим, как можно использовать данный API для создания более сложной валидацию.

Во-первых, HTML. Опять же, не стесняйтесь писать его вместе с нами:

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

Перейдём к базовому CSS, чтобы немного улучшить внешний вид формы и обеспечить визуальную обратную связь при введении не валидных данных:

Теперь давайте рассмотрим JavaScript, который реализует кастомную валидацию.

Комментарии объясняют логику хорошо, но кратко:

Примечание: Рабочий пример можно найти на GitHub по адресу detailed-custom-validation.html (отдельно можно найти исходный код.)

Constraint Validation API явяется мощным инструментом валидации форм, позволяющим получить контроль над пользовательским интерфейсом, существенно превосходящий возможности HTML и CSS.

Примечание: Для получения дополнительной информации смотрите руководства Constraint validation guide и Constraint Validation API.

Проверка форм без встроенного API

В некоторых случаях, например, при необходимости поддержки устаревших браузеров или кастомных элементов формы, вы не сможете или не захотите использовать Constraint Validation API. Вы по-прежнему сможете использовать JavaScript для валидации форм, но для этого всё нужно будет писать самостоятельно.

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

Пример без использования Constraint Validation API

Чтобы проиллюстрировать это дальше приводится упрощённая версия предыдущего примера, которая работает с устаревшими браузерами.

HTML почти тот такой же; мы только удалили функционал валидации HTML5.

CSS также не требует особых изменений; мы только заменили CSS-псевдокласс :invalid на реальный класс и не использовали селектор по атрибутам, так как он не работает в Internet Explorer 6.

Существенно изменился только JavaScript-код, который теперь должен выполнять гораздо больше работы.

Результат выглядит следующим образом:

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

Проверьте свои навыки!

Вы дошли до конца этой статьи, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы сохранили эту информацию, прежде чем двигаться дальше — Test your skills: Form validation.

Заключение

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

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

Источник