Проверка форм в HTML5 с помощью атрибута «pattern».
Валидация форм, как и юзабилити, имеет жизненно важное значение для безопасности сайта. В процессе проверки перед отправкой формы оцениваются значения полей input на корректный формат ввода К примеру, у нас есть поле input для ввода email’а, в таком случае значением должен выступать правильный адрес почты; адрес должен начинаться с цифры или буквы, затем знак @ и в конце доменное имя.
Спецификация HTML5 позволяет делать более легкую проверку в связи с введением новых типов таких как email , url , или tel , и с помощью них проверка осуществляется автоматически. Если введенная величина не отвечает ожидаемому формату, эти типы выдают ошибку, в результате чего выдается сообщение об ошибке, и это предотвращает подстановку неверных данных.
Неправильный адрес электронной почты — сообщение об ошибке (Chrome)
Однако, ожидать полной обработки всех возможных сценариев с полем input непрактично. Что если, у вас есть поля для имени пользователя, почтового индекса или другие специализированные типы данных, которые не относятся к типам спецификации? Как тогда проводить проверку этих полей? Вот здесь нам и пригодиться атрибут pattern .
Использование Атрибута Pattern
Атрибут pattern используется только для input элементов. Это позволяет нам задать собственные правила проверки, используя Регулярные Выражения (RegEx) . Еще раз, если величина не будет соответствовать заданному шаблону, то ввод вызовет ошибку.
Например, скажем у нас есть форма для ввода имени пользователя. Стандартизированного типа для поля имени пользователя не существует, значит, мы воспользуемся обычным типом text :
Давайте зададим правило, которое будет использовать в атрибуте pattern . В этом случае, мы зададим, что имя пользователя должно состоять из строчных букв; без заглавных, без чисел или других символов. И кроме того, имя пользователя не должно превышать 15 символов. По правилам регулярных выражений — это может быть записано следующим образом [a-z] <1,15>.
Пропишите [a-z] <1,15>в качестве значения атрибута pattern для поля username:
Теперь, поскольку допустимы только строчные буквы, подстановка любых других символов вызывает сообщение об ошибке:
Сообщение об ошибке, говорящее что ввод не соответствующий
Как вы можете видеть выше в сообщении об ошибке сказано «Please match the requested format». То есть, наша проверка формы работает, но это сообщение не дает представление пользователю о том, какой формат ввода от него требуется. А значит это плохой UX.
Настройка Сообщений при Проверке
К счастью, мы можем настроить сообщение, которое будет давать подсказки, и у нас есть два варианта, как это сделать. Самый простой — это задать атрибут title для input-элемента:
Теперь заголовок появляется с текстом сообщения по умолчанию:
И все же всплывающее сообщение не очень подходит. Если сравнить это сообщение с сообщением для поля email выше, то инструкция будет куда длиннее.
Второй способ позволяет справиться с данной задачей.
Замена Стандартного Сообщения при Проверке
Давайте заменим стандартный вариант “Please match the requested format” собственным сообщением. Для этого мы используем немного JavaScript.
Начнем с того, что добавим id для input элемента, чтобы мы могли легко к нему обратиться.
Теперь мы можем выбрать input элемент, используя JavaScript и и присвоить ему переменную (код ниже или между тегов script , или в отдельном JS файле, или в панели JS на CodePen):
И наконец, мы задаем сообщение, которое будет появляться при неправильном заполнении формы.
Событие oninvalid наследуется от объекта event , в котором присутствуют несколько свойств, среди которых target (элемент с неправильно введенным текстом) и validationMessage – содержит текст сообщения об ошибке. В примере выше мы переписали текст сообщения при помощи метода setCustomValidity() .
Теперь вместо стандартного, используется наше сообщение.
Стилизация
Чтобы дополнить новые типы input и новые методы для настройки проверки сообщений, в новой спецификации CSS3 созданы пара псевдоклассов — :valid и :invalid . Они позволяют нам использовать разное оформление, в зависимости от состояния проверки, например:
При использовании этих псевдоклассов необходимо помнить некоторые вещи:
- Первое :valid — используется по умолчанию, даже если входное значение пустое. Как вы можете видеть выше, мы установили цвет по умолчанию border-color: #ccc ;. Пустое значение всегда проходит проверку, если не добавить атрибут required . В таком случае значение поля становится ошибочным, и его рамка становится красной.
- стили для valid и invalid применяются сразу же во время того как пользователь осуществляет ввод, даже если если переменная пустая. Постоянное изменение в оформлении, может озадачить пользователя.
Несколько Слов о Стилизации Всплывающих Сообщений
Проверка заполнения форм стала новым стандартом спецификации HTML5, однако внешний вид всплывающих сообщений полностью лежит на разработчиках браузеров. Поэтому, следует быть готовым к тому, что внешний вид сообщений будет отличаться от браузера к браузеру, что не очень способствует постоянству вашего интерфейса.
Google Chrome убрал возможность настройки стилей всплывающего поля пару лет назад . Если же вам необходимо стилизовать поле под себя, то остается только полностью переписать данное поле с помощью JavaScript. Давайте разберемся, как это сделать!
Усложняем Функционал
Итак, мы собираемся создать собственные всплывающие сообщения, которые появляются, если вводимая величина не верна. Для начала, нам необходимо выбрать требуемые элементы с идентификаторами input и form :
Далее, мы создадим новый элемент, который будет содержать наше сообщение:
Тут мы создали новый div -элемент. Мы присвоили ему id со значением notify и спрятали его при помощи display : none . В конце мы вставляем новый div в form .
Отработка Событий
У нас есть два события, с которыми мы будем иметь дело. Первое, событие — invalid , когда ввод не совпадает с шаблоном. В случае invalid мы запускаем следующий код:
С помощью event.preventDefault(); мы блокируем результат по умолчанию, поэтому всплывающее окно браузера не появляется. Вместо этого мы будем показывать наше окно, используя элемент div . Мы создали новый текст для сообщения, добавили новый класс error , и показываем сообщение используя display:block .
Мы также добавили класс invalid для input элемента, задав ему красные границы. Также нам необходимо добавить правила в файл стилей.
Также, вы можете добавить классы анимации shake из Animate.css . Это добавит некоторый эффект, благодаря анимации “встряхивания”.
Второе событие — input . Оно вызывается, когда изменяется величина в input. Мы используем это событие, для возврата поля в нормальное состояние, а также чтобы скрыть всплывающее сообщение.
Как вы можете видеть выше, мы собираемся убрать классы для поля input и скрываем выпадающее сообщение.
Теперь у нас полностью настроенное сообщение при валидации формы. Протестируйте то, что у нас получилось: введите любое неправильное значение:
Примечание: не забудьте заглянуть на GraphicRiver, если вы ищете что-то вдохновляющее для вашего UI дизайна .
Заключительные Мысли
Использование стандартных типов полей input и атрибута pattern , придадут вашей форме, новый уровень валидации, но при этом не стоит и забывать про проверку на стороне сервера.
Как ни странно даже при отключенном JavaScript, последние версии браузеров показывают всплывающее сообщение и не отправляют форму. Однако, Safari не поддерживает атрибут pattern на момент написания статьи. Похожий функционал можно реализовать с помощью полифилла Webshim Lib .
Надеюсь, вам понравился сегодняшний урок, и вы будете обращаться к этой статье при настройке проверки заполнения форм в HTML5.
Валидация форм
Поля в форме предназначены для сбора информации от посетителей страницы. Но несмотря на все усилия и объяснения, получение правильной информации может оказаться трудным делом. Нетерпеливые или невнимательные посетители могут пропускать важные поля, заполнять поле или несколько полей не полностью, да и попросту нажимать неправильные клавиши. Заполнив таким образом форму, они нажимают кнопку «Отправить», и серверная программа получает набор данных, с которыми она не знает что делать (если не реализована валидация данных на серверной стороне).
Серьезной веб-странице требуется проверка данных, т.е. какой-либо способ обнаружения ошибок во введенных данных, а еще лучше — способ, не допускающий ошибок вообще. На протяжении многих лет веб-разработчики делали это с помощью процедур JavaScript собственной разработки или посредством профессиональных библиотек JavaScript. И говоря по правде, эти подходы давали отличные результаты.
Но, видя, что проверка выполняется повсеместно (практически всем нужно проверять вводимые данные на ошибки) и применяется лишь к нескольким основным типам данных (например, адресам электронной почты или датам), а также, что ее реализация — такая неинтересная и скучная задача (никому, по сути, не хочется писать один и тот же код для каждой формы, не говоря уже о тестировании его), определенно должен быть лучший способ для ее реализации.
Создатели HTML5 смогли увидеть эту надобность и изобрели способ привлечь браузеры на помощь, переложив задачу проверки с плеч веб-разработчиков на веб-обозреватели. Создатели HTML5 разработали систему проверки на стороне клиента, которая позволяет вставлять основные правила валидации в любое поле <input>. Лучшее в этой системе — это ее простота и легкость: все, что нужно сделать — так это вставить правильный атрибут.
Как работает проверка HTML5?
Основная идея в основе проверки форм HTML5 состоит в том, что разработчик указывает данные для валидации, но не реализует все необходимые для этого трудоемкие подробности. Это что-то похожее на начальника, который только отдает приказания, но реализует эти указания не сам, а с помощью подчиненных.
Например, допустим, что определенное поле нельзя оставлять пустым, и посетитель должен ввести в него хоть что-то. В HTML5 это осуществляется с помощью атрибута required в соответствующем поле (далее дорабатываем пример из предыдущей статьи):
Даже с применением для поля атрибута required на это требование нет никаких визуальных указателей по умолчанию. Поэтому следует обратить внимание пользователя на это требование с помощью каких-либо своих визуальных признаков, например, выделив рамку поля цветом и поставив возле него звездочку.
Проверка выполняется, когда пользователь нажмет кнопку для отправки формы. Если браузер поддерживает формы HTML5, он заметит пустое обязательное для заполнения поле, перехватит вызов отправки формы и отобразит всплывающее сообщение об ошибке:
Хотя официальных требований к оформлению сообщения об ошибках при проверке не существует, во всех браузерах для этой цели применяются всплывающие подсказки. К сожалению, веб-разработчики не могут изменять оформление или текст этого сообщения (без использования JavaScript), по крайней мере в настоящее время.
Возникает еще один вопрос: что будет, если нарушено несколько правил проверки, например, не заполнено несколько обязательных полей?
Опять же, ничего не будет, пока пользователь не нажмет кнопку для отправки формы. Только после этого браузер начнет проверять поля сверху вниз. Встретив первое некорректное значение, он прекращает дальнейшую проверку, отменяет отправку формы и выводит сообщение об ошибке рядом с полем, вызвавшим эту ошибку. (Кроме этого, если при заполнении формы область с полем ошибки вышла за пределы экрана, браузер прокручивает экран, чтобы это поле находилось вверху страницы.) После того как пользователь исправит данную ошибку и опять нажмет кнопку для отправки формы, браузер остановится на следующей ошибке ввода и процесс повторится.
Отключение проверки
В некоторых случаях может потребоваться отключить проверку. Например, вы хотите протестировать свой серверный код на правильность обработки поступивших некорректных данных. Чтобы отключить проверку для всей формы, в элемент <form> добавляется атрибут novalidate:
Другой подход — это отключить проверку в кнопке для отправки формы. Такой способ иногда полезен в настоящей веб-странице. Например, вместо отправки, может быть, требуется сохранить наполовину заполненную форму для дальнейшего использования. Чтобы получить такую возможность, в элемент <input> соответствующей кнопки вставляется атрибут formnovalidate:
Обнаружение незаполненных полей — это только один из нескольких типов проверки. Позже мы рассмотрим обнаружение ошибок в данных разных типов.
Оформление результатов проверки
Хотя веб-разработчики не могут оформлять сообщения об ошибках проверки, они могут изменять внешний вид полей в зависимости от результатов их валидации. Например, можно выделить поле с неправильным значением цветным фоном сразу же, когда браузер обнаружит неправильные данные.
Все, что для этого требуется — это добавить несколько простых CSS3-псевдоклассов. Доступны следующие опции:
required и optional
Применяют форматирование к полю в зависимости от того, использует ли это поле атрибут required или нет;
valid и invalid
Применяют форматирование к полю в зависимости от правильности введенного в него значения. Но не забывайте, что большинство браузеров не проверяет данные, пока пользователь не попытается отправить форму, поэтому форматирование полей с некорректными значениями не выполняется сразу же при введении такого значения;
in-range и out-of-range
Форматирование к полям, для которых используется атрибут min или max, чтобы ограничить их значение определенным диапазоном значений.
Проверка с помощью регулярных выражений
Самым мощным (и самым сложным) поддерживаемым HTML5 типом проверки является проверка на основе регулярных выражений. Поскольку JavaScript уже поддерживает регулярные выражения, добавление этой возможности к формам HTML будет вполне логичным шагом.
Регулярное выражение — это шаблон для сопоставления с образцом, закодированный согласно определенным синтаксическим правилам. Регулярные выражения применяются для поиска в тексте строк, которые отвечают определенному шаблону. Например, с помощью регулярного выражения можно проверить, что почтовый индекс содержит правильное число цифр, или в адресе электронной почты присутствует знак @, а его доменное расширение содержит, по крайней мере, два символа. Возьмем, например, следующее выражение:
Квадратные скобки в начале строки определяют диапазон допустимых символов. Иными словами, группа [A-Z] разрешает любые прописные буквы от А до Z. Следующая за ней часть в фигурных скобках указывает множитель, т.е. <3>означает, что нужны три прописные буквы. Следующее тире не имеет никакого специального значения и означает самое себя, т.е. указывает, что после трех прописных букв должно быть тире. Наконец, [0-9] обозначает цифры в диапазоне от 0 до 9, а <3>требует три таких цифры.
Регулярные выражения полезны для поиска в тексте строк, отвечающих условиям, заданных в выражении, и проверки, что определенная строка отвечает заданному регулярным выражением шаблону. В формах HTML5 регулярные выражения применяются для валидации.
Для обозначения начала и конца значения в поле символы ^ и $, соответственно, не требуются. HTML5 автоматически предполагает наличие этих двух символов. Это означает, что значение в поле должно полностью совпасть с регулярным выражением, чтобы его можно было считать корректным.
Таким образом следующие значения будут допустимыми для этого регулярного выражения:
Но регулярные выражения очень быстро становятся более сложными, чем рассмотренный нами пример. Поэтому создание правильного регулярного выражения может быть довольно трудоемкой задачей, что объясняет, почему большинство разработчиков предпочитает использовать для проверки данных на своих страницах готовые регулярные выражения.
Чтобы применить полученное тем или иным путем регулярное выражение для проверки значения поля <input> или <textarea>, его следует добавить в этот элемент в качестве значения атрибута pattern:
Регулярные выражения кажутся идеальным средством для проверки правильности адресов электронной почты. Впрочем, не кажутся, а так оно и есть. Но подождите немного с использованием их таким образом, т.к. в HTML5 уже имеется выделенный тип для адресов электронной почты со встроенным в него регулярным выражением (будет рассмотрен в следующей статье).
Специализированная JavaScript-проверка
Спецификация HTML5 также оговаривает набор свойств JavaScript, с помощью которых можно определить корректность значений полей (или заставить браузер выполнить проверку).
Наиболее полезным из них является метод setCustomValidity(), с использованием которого можно написать специальный сценарий для проверки конкретных полей, который будет работать с системой валидации HTML5.
Осуществляется это следующим образом. Прежде всего, значение соответствующего поля проверяется на правильность. Это делается с помощью обычного события oninput:
В данном примере событие oninput активизирует функцию validateComments(). Ответственность за написание этой функции, проверку текущего значения поля <input> и вызова метода setCustomValidity() лежит на разработчике.
Если с текущим значением поля имеются проблемы, при вызове метода setCustomValidity() ему необходимо передать сообщение об ошибке. Если же текущее значение допустимо, этот метод вызывается с пустой строкой, таким образом очищая специальные сообщения об ошибке, которые могли использоваться ранее.
Далее приводится пример использования этого метода для проверки требования, чтобы значение в поле содержало не менее 20 символов:
Конечно, эту задачу можно решить более элегантно с помощью регулярного выражения, требующего длинную строку. Но в то время как регулярные выражения прекрасно подходят для проверки определенных типов данных, специальная логика проверки может делать все, что угодно, от сложных алгебраических вычислений до установления связи с веб-сервером.
Поддержка проверки браузерами
Разработчики браузеров добавляли поддержку проверки в свои продукты по частям, вследствие чего некоторые версии браузеров поддерживают одни возможности валидации, но не обращают внимания на другие. В таблице ниже указаны минимальные версии браузеров, полностью поддерживающих валидацию HTML5:
| Браузер | IE | Firefox | Chrome | Safari | Opera | Safari iOS | Android |
| Минимальная версия | 10 | 4 | 10 | 5 | 10 | — | — |
Так как проверка HTML5 не заменяет валидацию на стороне сервера, ее можно рассматривать как второстепенную возможность, когда даже такая несовершенная поддержка лучше, чем отсутствие вообще какой-либо поддержки. В браузерах, не поддерживающих проверку, таких как IE 9, можно отправлять формы с некорректными данными, но эти ошибки можно выявить на стороне сервера и возвратить эту страницу назад браузеру, но с указанными ошибками.
С другой стороны, ваш веб-сайт может содержать сложные формы, в которых можно сделать массу ошибок при вводе данных, и вы не хотите потерять тех IE-пользователей, которые после первой неудачной попытки заполнить вашу форму не предпримут другую. В таком случае у вас есть два пути: разработать и использовать свою систему проверки или же использовать библиотеку JavaScript, чтобы компенсировать умственную отсталость IE. Какой из этих двух подходов выбрать, зависит от объема и сложности проверки.
На странице HTML5 Cross Browser Polyfills можно найти длинный список библиотек JavaScript, которые все, по большому счету, делают то же самое. Одна из лучших среди этих библиотек — это webforms2.
Библиотека webforms2 реализует все рассмотренные на данный момент атрибуты. Для использования библиотеки загрузите все ее файлы в папку своего веб-сайта (а лучше в подкаталог папки веб-сайта) и добавьте в веб-странице ссылку на эту библиотеку.
Библиотека webforms2 хорошо интегрируется с другой заплаткой JavaScript, называющейся html5Widgets. Она реализует поддержку возможностей форм, которые мы рассмотрим далее, таких как ползунок и средства выбора даты и цвета. Обе эти библиотеки предоставляют хорошую общую поддержку для веб-форм, но содержат в своем коде неизбежные пробелы и незначительные ошибки. Качество сопровождения и усовершенствования этих библиотек покажет только время.
Простая валидация формы без JS
В данной статье я бы хотел поделиться методом быстрой валидации полей с помощью разметки и стилей. Данный метод не является кроссбраузерным и рекомендуется к использованию только как дополнительная фича. По ходу статьи мы будем уменьшать наши шансы на кроссбраузерность, но повышать функциональность.
Давайте попробуем собрать стандартную форму, которая будет включать в себя: Имя, E-Mail, Телефон, Ссылку на сайт и допустим Ваш рост, чтобы поэксперементировать с числовым полем.
HTML5
Сейчас уже никого не удивить атрибутами валидации input полей, которое принес нам стандарт HTML5. Однако, обходить стороной мы его не станем — этот метод валидации является наиболее поддерживаемым в современных браузерах.
Самый простой путь валидации — это определить тип input поля и расставить атрибуты required которые отвечают за обязательность заполнения.
Применение этих двух атрибутов позволит гораздо эффективнее валидировать вводимую информацию нативными методами. Ну и конечно же поддержка этих свойств браузерами наиболее широка.
Отдельно хотелось бы сказать про тип поля tel. Ожидается что браузер будет валидировать телефонные номера, но нет, поле с типом tel используется сейчас только для автозаполнения. Дело в том, что валидация телефонных номеров очень неоднозначная задача из-за слишком большого количества различных форматов телефонных номеров в разных странах, которые просто никак не получится унифицировать и записать в одно правило.
Однако, нам на помощь приходит атрибут pattern. Этот атрибут принимает в себя значение регулярного выражения. В нашем случае рассмотрим вариант паттерна для ввода мобильного телефона в РФ: +7 (123) 456-78-91. Для этого добавим простое регулярное выражение в наше поле с телефоном, а также ограничим минимальное и максимальное количество символов:
Обычно я использую данный паттерн в связке с маской для ввода номера, но тут к сожалению без JS пока что не обойтись. Если вы не используете маску, то я бы не стал использовать паттерны на вводе телефона, поскольку это в большинстве случаев вызовет больше неудобств для пользователя.
Поддержка браузерами атрибута pattern на данный момент очень хорошая. iOS начиная с версии 10.3 полностью поддерживает данное свойство, до этого наблюдалось отсутствие подсказок о неправильном вводе данных.
Стоит также учитывать, что атрибут minlength до сих пор не поддерживается в браузерах IE, EDGE и только с версии 10.3 появился в iOS. Однако maxlength поддерживается везде и очень давно. Нам в целом хватит и этого.
Давайте также поставим ограничение для поля с ростом. Допустим мы предполагаем, что пользователь нашего сайта определенно не может быть ниже 100 см и выше 250 см. Так и напишем:
С поддержкой этих атрибутов в браузерах, все хорошо.
Перейдем к стилизации!
Для того чтобы кастомно стилизовать нашу валидацию, воспользуемся псевдоклассами :invalid и :valid. Поддержка этих псевдоклассов в браузерах позволяет использовать их максимально широко на данный момент.
Казалось бы, берем полученные знания и применяем! Но не все так просто как кажется, давайте проверим как это работает. В результате мы получим, что все наши поля изначально пустые и обязательные будут считаться не валидными, а все остальные валидными. Совсем не красиво и непонятно для пользователя, что от него хотят.
Мы можем пойти на небольшую хитрость и использовать псевдокласс :placeholder-shown. С помощью этого псевдокласса мы можем определить отображается ли сейчас значение placeholder в нашем поле ввода. Атрибут placeholder отображается только тогда, когда в наше поле ничего не введено. Соответственно, чтобы применить этот псевдокласс нам просто нужно обратить его свойство с помощью :not. В итоге получаем вот такую конструкцию:
Если прочитать дословно: окрасить красным цветом границу инпута, когда наше поле не валидно и когда в нем не отображается значение атрибута placeholder. Если ваше поле не имеет атрибута placeholder, можно просто поставить внутри пробел:
У данного метода есть только один минус: поддержка. Псевдоэлемент :placeholder-shown поддерживается во всех браузерах кроме IE и EDGE. К счастью :not не обладает таким недостатком.
Для примера я набросал все вышесказанное в CodePen и добавил еще немного возможностей:
Form Input Validation Using Only HTML5 and Regex
Monty Shokeen Last updated Mar 26, 2021
Validation of form input is something that should be taken seriously. With luck, nothing worse than garbage data will be submitted to a site which uses data from forms without proper validation. However, there’s also a chance that hackers will be able to compromise the private data of users who trusted you with their information.
Since validation is so important, it makes sense that there are tools and libraries to validate and sanitize data on both the front-end and the back-end.
In this tutorial, our focus will be on using the built-in features of HTML5 to validate different kinds of input without relying on any external libraries. Obviously, you should not stop at just HTML5-based validation, but this would be a good start to make forms on the website more secure.
The Form Input Element
Whenever you want to get some kind of input from your users, you will most likely use the HTML input element. It doesn’t matter if you want to know their first name, last name, email address, the city they currently live in, their phone number, or their favorite sports team. The input element is a very user-friendly way of getting information from our visitors.
However, some malicious users would like to take advantage of the fact that they can enter almost any kind of string into an input element and submit a form. Similarly, there might be some users who just don’t know that they are entering the data in the wrong format.
Both these problems can be solved very easily by using some HTML5 attributes with your form elements.
The Type Attribute
The type attribute will determine what kind of input is considered valid for a given element. When no value is specified for the type attribute, the type is set to text by default. This basically means that all kinds of text inputs will be considered valid for that particular element.
This is fine when you want users to input their names. However, when you want them to enter their email address or numbers like their age and weight, it is much better to set the value of the type attribute to something appropriate.
Here are a couple of values that you can choose from:
- email : This will ask users to enter their email address in a valid format. For instance, they can’t just write myemail.com or something@ or @something.com. They will have to enter a value similar to myemail@domain.tld. Of course, they can still enter non-existent emails, but that is a different issue!
- number : This will make sure that only numbers are considered valid input. For example, when you ask someone their age in a form, they won’t be able to submit potato or thirty six as input. They will have to write an actual number like 36 or 15.
- url : You can set the type attribute to url if you want users to enter a valid URL into the input element. This will prevent them from entering something like tutsplus. However, tutsplus.com will also be considered invalid—users will have to enter a full URL like https://tutsplus.com.
- tel : Using this value is not as helpful as others because the format for a telephone number varies all over the world. There is just no standard pattern that browsers can match against the input to determine if the number is valid. However, setting the type to tel can be helpful at a later stage when you do your own custom validation.
There are many other values for the type attribute which can be used to specify the type of input that is valid for a particular element. You can read about all these values on the Input element reference page on MDN.
The following CodePen demo shows how we can use the type attribute to control what is permitted in different input fields.
The Minimum and Maximum Length Attributes
One more way to restrict what passes as valid input for an element is to use the minlength and maxlength attributes. These set the minimum and maximum number of characters that need to be entered in an input element to make it valid.
The right values for both these attributes will vary on a case-by-case basis. For instance, some websites might want a username to be between 4 and 15 characters long, while others might limit the maximum length to 12. Similarly, people in some countries will have unusually short or long names compared to others.
Using Regex for Form Validation
Setting a type attribute value certainly helps us in limiting what passes as valid input. However, you can go even further and specify a pattern that a username or email address has to follow in order to be considered valid.
Let’s say you want to make sure that usernames are only alphanumeric. This can be done easily with the help of the pattern attribute. You just have to set its value to a regex expression which will act as a guideline to determine which input is valid and which is not.
Here are some examples of using regex with the pattern attribute.
The pattern above will keep checking that all the usernames only contain characters from a-z, A-Z, or 0-9. For example, monty42, 42monty, MON42ty, and mon42ty are all valid usernames in this case, but monty_42 is invalid.
The minlength and maxlength attributes will make sure that the username is not too small or too big.
If you want the username to begin with a particular character like an underscore, you can simply add it to the front of the pattern.
Now, every username which does not begin with _ and contains any characters besides a-z, A-Z, or 0-9 after that will be considered invalid.
I hope this helps in clarifying how we can use the pattern attribute and some regex to limit what is considered valid input even when the type attribute is set to text .
Advanced Validation With Regex Patterns
You can also use the pattern attribute along with other types of input elements like email and url to restrict what is considered valid. For example, let’s say you only want users to enter a URL which is a subdomain of tutsplus.com. You can simply set the value of the pattern attribute to https://.*\.tutsplus.com . Now, any input like https://google.com or https://envato.com will be considered invalid. Even if you use a tutsplus.com URL that starts with https://, that would be invalid because the URL is supposed to start with https://.
The same thing can be done with emails. If you want the emails to end with something specific, you can simply use the pattern attribute for that. Here is an example:
If the above input element is used in a form, users will only be able to enter an email address that ends with tutsplus.com or envato.com. This means that hi@gmail.com or howdy@something.com would be invalid.
Check out our JavaScript Regex Cheatsheet for more examples of regular expressions and tips on how to use them.