Pattern для телефона html

HTML attribute: pattern

The pattern attribute specifies a regular expression the form control’s value should match. If a non- null value doesn’t conform to the constraints set by the pattern value, the ValidityState object’s read-only patternMismatch property will be true.

Try it

Overview

The pattern attribute is an attribute of the text, tel, email, url, password, and search input types.

The pattern attribute, when specified, is a regular expression which the input’s value must match for the value to pass constraint validation. It must be a valid JavaScript regular expression, as used by the RegExp type, and as documented in our guide on regular expressions; the ‘u’ flag is specified when compiling the regular expression so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.

If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored.

Note: Use the title attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You must not rely on the tooltip alone for an explanation. See below for more information on usability.

Some of the input types supporting the pattern attribute, notably the email and url input types, have expected value syntaxes that must be matched. If the pattern attribute isn’t present, and the value doesn’t match the expected syntax for that value type, the ValidityState object’s read-only typeMismatch property will be true.

Usability

When including a pattern , provide a description of the pattern in visible text near the control. Additionally, include a title attribute which gives a description of the pattern. User agents may use the title contents during constraint validation to tell the user that the pattern is not matched. Some browsers show a tooltip with title contents, improving usability for sighted users. Additionally, assistive technology may read the title aloud when the control gains focus, but this should not be relied upon for accessibility.

Constraint validation

If the input’s value is not the empty string and the value does not match the entire regular expression, there is a constraint violation reported by the ValidityState object’s patternMismatch property being true . The pattern’s regular expression, when matched against the value, must have its start anchored to the start of the string and its end anchored to the end of the string, which is slightly different from JavaScript regular expressions: in the case of pattern attribute, we are matching against the entire value, not just any subset, as if a ^(?: were implied at the start of the pattern and )$ at the end.

Note: If the pattern attribute is specified with no value, its value is implicitly the empty string. Thus, any non-empty input value will result in constraint violation.

Examples

Matching a phone number

p> label> Enter your phone number in the format (123) - 456 - 7890 (input name="tel1" type="tel" pattern="6" placeholder="###" aria-label="3-digit area code" size="2" />) - input name="tel2" type="tel" pattern="6" placeholder="###" aria-label="3-digit prefix" size="2" /> - input name="tel3" type="tel" pattern="5" placeholder="####" aria-label="4-digit number" size="3" /> label> p> 

Here we have 3 sections for a north American phone number with an implicit label encompassing all three components of the phone number, expecting 3-digits, 3-digits and 4-digits respectively, as defined by the pattern attribute set on each.

If the values are too long or too short, or contain characters that aren’t digits, the patternMismatch will be true. When true , the element matches the :invalid CSS pseudo-classes.

input:invalid  border: red solid 3px; > 

If we had used minlength and maxlength attributes instead, we may have seen validityState.tooLong or validityState.tooShort being true.

Specifying a pattern

You can use the pattern attribute to specify a regular expression that the inputted value must match in order to be considered valid (see Validating against a regular expression for a simple crash course on using regular expressions to validate inputs).

The example below restricts the value to 4-8 characters and requires that it contain only lower-case letters.

form> div> label for="uname">Choose a username: label> input type="text" id="uname" name="name" required size="45" pattern="[a-z]" title="4 to 8 lowercase letters" /> span class="validity">span> p>Usernames must be lowercase and 4-8 characters in length.p> div> div> button>Submitbutton> div> form> 

div  margin-bottom: 10px; position: relative; > p  font-size: 80%; color: #999; > input + span  padding-right: 30px; > input:invalid + span::after  position: absolute; content: "✖"; padding-left: 5px; > input:valid + span::after  position: absolute; content: "✓"; padding-left: 5px; > 

Accessibility Concerns

When a control has a pattern attribute, the title attribute, if used, must describe the pattern. Relying on the title attribute for the visual display of text content is generally discouraged as many user agents do not expose the attribute in an accessible manner. Some browsers show a tooltip when an element with a title is hovered, but that leaves out keyboard-only and touch-only users. This is one of the several reasons you must include information informing users how to fill out the control to match the requirements.

While title s are used by some browsers to populate error messaging, because browsers sometimes also show the title as text on hover, it therefore shows in non-error situations, so be careful not to word titles as if an error has occurred.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Источник

Простая валидация формы без JS

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

Давайте попробуем собрать стандартную форму, которая будет включать в себя: Имя, E-Mail, Телефон, Ссылку на сайт и допустим Ваш рост, чтобы поэксперементировать с числовым полем.

HTML5

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

Самый простой путь валидации — это определить тип input поля и расставить атрибуты required которые отвечают за обязательность заполнения.

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

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

Однако, нам на помощь приходит атрибут pattern. Этот атрибут принимает в себя значение регулярного выражения. В нашем случае рассмотрим вариант паттерна для ввода мобильного телефона в РФ: +7 (123) 456-78-91. Для этого добавим простое регулярное выражение в наше поле с телефоном, а также ограничим минимальное и максимальное количество символов:

\s[\(]\d[\)]\s\d[\-]\d[\-]\d" minlength="18" maxlength="18" /> 

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

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

Стоит также учитывать, что атрибут minlength до сих пор не поддерживается в браузерах IE, EDGE и только с версии 10.3 появился в iOS. Однако maxlength поддерживается везде и очень давно. Нам в целом хватит и этого.

Давайте также поставим ограничение для поля с ростом. Допустим мы предполагаем, что пользователь нашего сайта определенно не может быть ниже 100 см и выше 250 см. Так и напишем:

С поддержкой этих атрибутов в браузерах, все хорошо.

CSS3

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

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

Мы можем пойти на небольшую хитрость и использовать псевдокласс :placeholder-shown. С помощью этого псевдокласса мы можем определить отображается ли сейчас значение placeholder в нашем поле ввода. Атрибут placeholder отображается только тогда, когда в наше поле ничего не введено. Соответственно, чтобы применить этот псевдокласс нам просто нужно обратить его свойство с помощью :not. В итоге получаем вот такую конструкцию:

input:invalid:not(:placeholder-shown) input:valid:not(:placeholder-shown)

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

У данного метода есть только один минус: поддержка. Псевдоэлемент :placeholder-shown поддерживается во всех браузерах кроме IE и EDGE. К счастью :not не обладает таким недостатком.

Для примера я набросал все вышесказанное в CodePen и добавил еще немного возможностей:

Итог

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

Источник

Как правильно ввести в html5 pattern телефонного номера?

Сегодня у меня заметка совсем под узкий круг читателей. А именно, я расскажу, как правильно записать в html5 pattern телефонного номера.

Что такое pattern вообще? Это своего рода формула, которой вы задаете, как именно пользователь должен заполнить поле. Если он заполняет не так, как указано вами в паттерне, форма не отправится и человеку придется исправить ошибку.

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

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

В формате: 7-ххх-ххх-хххх-7-9">

Больше всего здесь нас должен интересовать этот атрибут. Во-первых, давайте сразу проверим его работу. О placeholder я написал в этой статье.

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

Ну а теперь подробнее о значении pattern = «7-1-1-9» . Семерка вначале означает, что первой цифрой обязательно должна быть 7 и ничто другое. Далее нужно поставить дефис и ввести три цифры от 0 до 9, опять поставить дефис и ввести еще 3 цифры, после чего вновь дефис и последние 4 цифры.

Кстати, в этом варианте если заполнить все без дефисов, то форма посчитает, что вы ввели значение, не соответствующее формату, поэтому их, если что, можете удалить из значения. В таком случае pattern можно существенно сократить:
pattern = «74»

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

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший — HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей — 4.8 из 5. Пусть вашим сайтам будет хорошо.

Еще материалы по HTML

Источник