Обязательное поле для заполнения html – Валидация html формы. Как сделать проверку на заполнение одного из двух обязательных полей?

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

Реальный пример можно увидеть здесь:

Посмотреть примерСкачать

Это уже не первый урок на данную тему, возможно вы не видели прошлые и они вам будут интересны:

HTML часть

Давайте посмотрим из чего же состоит данная форма:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<form action="#" method="post" name="contact_form">
    <ul>
        <li>
             <h3>Напишите нам</h3>
             <span>* поля обязательные к заполнению</span>
        </li>
        <li>
            <label for="name">Имя:</label>
            <input type="text"  placeholder="Петров Александр" required />
        </li>
        <li>
            <label for="email">Email:</label>
            <input type="email" name="email" placeholder="[email protected]" required />
            <span>Например "[email protected]"</span>
        </li>
        <li>
            <label for="website">Веб-сайт:</label>
            <input type="url" name="website" placeholder="https://sitehere.ru" required pattern="(http|https)://.+"/>
            <span>Например "https://sitehere.ru"</span>
        </li>
        <li>
            <label for="message">Сообщение:</label>
            <textarea name="message" cols="40" rows="6" required ></textarea>
        </li>
        <li>
            <button type="submit">Отправить</button>
        </li>
    </ul>
</form>

Если вы изучали прошлые уроки, то вам будут знакомы такие атрибуты как placeholder и required.

Но всё же повторю еще раз:

placeholder — присутствие данного атрибута означает что на фоне данного текстового поля будет текст, заданный в значении данного атрибута. А при вводе он исчезает.

required — если у поля есть данный атрибут, значит поле является обязательным для заполнения.

И мы не использовали Javascript потому что HTML5 позволяет нам сделать с помощью своих функций.

Также здесь есть новый атрибут pattern=»(http|https)://.+»

CSS часть

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.contact_form ul {
    width:750px;
    list-style-type:none;
    list-style-position:outside;
    margin:0px;
    padding:0px;
}
.contact_form li{
    padding:12px; 
    border-bottom:1px solid #eee;
    position:relative;
} 
.contact_form li:first-child, .contact_form li:last-child {
    border-bottom:1px solid #777;
}

Последнее свойство значит что мы задаем границу первому и последнему элементу списка. Далее определим основные стили для элементов формы:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.contact_form label {
    width:150px;
    margin-top: 3px;
    display:inline-block;
    float:left;
    padding:3px;
}
.contact_form input {
    height:20px; 
    width:220px; 
    padding:5px 8px;
}
.contact_form textarea {
    padding:8px; 
    width:300px;
}
 
.contact_form button {
    margin-left:156px;
}

А сейчас напишем стили, когда поля активны и когда нет:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.contact_form input, .contact_form textarea { 
    border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
    padding-right:30px;
    -moz-transition: padding .25s; 
    -webkit-transition: padding .25s; 
    -o-transition: padding .25s;
    transition: padding .25s;
}
.contact_form input:focus, .contact_form textarea:focus {
    background: #fff; 
    border:1px solid #555; 
    box-shadow: 0 0 3px #aaa; 
    padding-right:70px;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13

.contact_form input:required, .contact_form textarea:required {
    background: #fff url(images/red_asterisk.png) no-repeat 98% center;
}
.contact_form input:required:valid, .contact_form textarea:required:valid {
    background: #fff url(images/valid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}
.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {
    background: #fff url(images/invalid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}

Осталось совсем чуть-чуть :). Предпоследним шагом необходимо задать стили для подсказок:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.form_hint {
    background: #d45252;
    border-radius: 3px 3px 3px 3px;
    color: white;
    margin-left:8px;
    padding: 1px 6px;
    z-index: 999; /* значит что подсказка будет перекрывать все элементы */
    position: absolute; /* можно подсказку разбить на две строки */
    display: none;
}
.form_hint::before {
    content: "\25C0";
    color:#d45252;
    position: absolute;
    top:1px;
    left:-6px;
}
.contact_form input:focus + .form_hint {display: inline;}
.contact_form input:required:valid + .form_hint {background: #28921f;}
.contact_form input:required:valid + .form_hint::before {color:#28921f;}

И последним действием будет задание стиля кнопке «Отправить»:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

button.submit {
    background-color: #68b12f;
    background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
    background: -webkit-linear-gradient(top, #68b12f, #50911e);
    background: -moz-linear-gradient(top, #68b12f, #50911e);
    background: -ms-linear-gradient(top, #68b12f, #50911e);
    background: -o-linear-gradient(top, #68b12f, #50911e);
    background: linear-gradient(top, #68b12f, #50911e);
    border: 1px solid #509111;
    border-bottom: 1px solid #5b992b;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: inset 0 1px 0 0 #9fd574;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
    -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
    -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
    -o-box-shadow: 0 1px 0 0 #9fd574 inset;
    color: white;
    font-weight: bold;
    padding: 6px 20px;
    text-align: center;
    text-shadow: 0 -1px 0 #396715;
}
button.submit:hover {
    opacity:.85;
    cursor: pointer; 
}
button.submit:active {
    border: 1px solid #20911e;
    box-shadow: 0 0 10px 5px #356b0b inset; 
    -webkit-box-shadow:0 0 10px 5px #356b0b inset ;
    -moz-box-shadow: 0 0 10px 5px #356b0b inset;
    -ms-box-shadow: 0 0 10px 5px #356b0b inset;
    -o-box-shadow: 0 0 10px 5px #356b0b inset;
}

Вывод

Ну вот и все! 🙂 Интернет-технологии настолько быстро развиваются, что вы и заметить не успеете как все будут применять связку HTML5+CSS3. Конечно надо предусматривать как будет выглядеть тот или иной элемент в старых браузерах, но и про новые возможности забывать нельзя!

Успехов!

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

Атрибут required тега | HTML справочник

Значение и применение

Атрибут required (HTML тега <input>) является логическим атрибутом, который указывает, что поле ввода должно быть заполнено перед отправкой формы.

Атрибут не может быть использован с полями данных следующих типов (атрибут type):

• button (элемент управления, который определяет кнопку).
• hidden (элемент управления, который определяет скрытое поле ввода).
• image (элемент управления, который определяет графическую кнопку «отправить форму»).

Поддержка браузерами

Синтаксис:

<input required>

Значения атрибута

Отличия HTML 4.01 от HTML 5

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

<!DOCTYPE html>
<html>
<head>
<title>Пример использования атрибута required HTML тега <input></title>
</head>
<body>
	<form>
		Login: <input type = "text"  name = "login" required><br><br>  <!-- поле обязательно для заполнения -->
		Email: <input type = "email"  name = "email" required><br><br>  <!-- поле обязательно для заполнения -->
		<input type = "submit">
	</form>
</body>
</html>

В данном примере мы использовали два различных поля (текстовое — «text» и поле для ввода адреса электронной почты — «email»), для обоих полей мы указали атрибут required, который не дает отправить форму пока поле не будет заполнено.

Результат нашего примера:

HTML5 и его атрибуты для проверки формы

В этой статье я хочу рассказать, как можно проверить форму без использования php или javascript. На HTML5 есть возможность указывать, какое поле должно быть обязательным для заполнения, проверить правильность ввода в поле e-mail адрес, телефон, имя и т. д.

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

Итак, если вы не знаете языков программирования php или javascript, чтобы осуществить проверку формы, не беда – HTML5 справится с этим отлично.

К примеру, у нас есть стандартная html форма:

<form method="post" action="">
<p><input ENGINE="text" name="name" /></p>
<p><input type="text" name="email" /></p>
<p><input type="text" name="tel" /></p>
<p><textarea name="quest" rows="6" cols="40"></textarea></p>
<input type="submit" name="subscribe" value="Отправить!">
</form>

Результат:

Если не заполнить ни одного поля, а нажать кнопку «Отправить!», форма без проблем отправится на указанную почту в прописанном обработчике.
Как же сделать проверку формы на заполнение полей ?

1. Указать поле обязательным для заполнения с помощью атрибута «required».

Достаточно прописать атрибут «required» в том поле, которое вы считаете обязательным для заполнения. Для примера, давайте пропишем «required» к полю «email»:

<input type="text" name="email" required />

Результат:

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

2. Укажите атрибут «placeholder», чтобы пользователь видел, что необходимо вводить в поле. Например, так:

<input type="text" name="name" placeholder="Ваше Имя"/>

Заполните и для остальных полей:

<form method="post" action="">
<p><input type="text" name="name" placeholder="Ваше Имя"/></p>
<p><input type="text" name="email" placeholder="Ваш E-mail" required /></p>
<p><input type="text" name="tel" placeholder="Ваш телефон"/></p>
<p><textarea name="quest" rows="6" cols="40" placeholder="Ваш вопрос"></textarea></p>
<input type="submit" name="subscribe" value="Отправить!">
</form>

Результат:

3. Чтобы предотвратить неправильное заполнение поля формы, нужно в атрибуте «type» заменить значение «text» на «email». Например, было так:

<p><input type="text" name="email" placeholder="Ваш E-mail" required /></p>

стало так:

<p><input type="email" name="email" placeholder="Ваш E-mail" required /></p>

В результате, если пользователь, когда будет писать email адрес, не поставит «@», ему сразу же выскочит ошибка с подсказкой, что в адресе электронной почты должен присутствовать символ «@».

Результат:

Дополнение:

Такой фокус можно проделать с полем для сайта, если такое имеется:

<input type="url" >

формат ввода должен быть таким:

https://bloggood.ru/

4. Проверить, правильно ли заполнены поля с помощью атрибута «pattern».
Чтобы проверить значение элемента на основе регулярного выражения, используют атрибут «pattern».

Например, если нужно, чтобы имя в поле всегда писалось на русском языке или чтобы номер телефона был написан по определенному шаблону «+38(093)-000-00-00» и т .д., то атрибут «pattern» отлично справится с этой задачей.

Шаблон:

<input type="email" pattern="выражение">

Итак, нужно чтобы пользователь ввел имя русскими буквами. Для этого пропишите в атрибуте «pattern» вот такое выражение:

pattern="[А-Яа-яЁё]{4,}"

Объяснение: в квадратных скобках [ ] пишите, какие буквы должны вводиться в поле для имени. В моем примере можно вводить только русские буквы в любом регистре. Если нужно только латинскими, сделайте вот так:

pattern="[ A-Za-z]{4,}"

Цифра, что находится в фигурных скобках { } означает число вводимых символов. В моем примере не менее 4-х символов:

Если нужно проверить правильность заполнения email почты, пропишите в атрибуте «pattern» вот такое выражение:

pattern="([A-z0-9_.-]{1,})@([A-z0-9_.-]{1,}).([A-z]{2,8})"

Объяснение: каждый проверяемый участок берется в круглые скобки ( ).

Итак, первый проверяемый участок до символа «@». В квадратных скобках [] я прописал, какие  буквы должны вводиться в поле. В моем примере это латинские буквы, цифры, нижнее подчеркивание, дефис и точка. В фигурных скобках { } я прописал, что символов должно быть не менее одного. То есть, такой номер не пройдет «@rambler.ru».

Далее я закрываю проверяемый участок круглой скобкой и прописываю знак «@».

([A-z0-9_.-]{1,})@

Проверяем второй участок после символа «@». Открываем круглые скобки и в квадратных скобках прописываем снова, какие  буквы должны вводиться в поле. В моем примере это латинские буквы, цифры, нижнее подчеркивание, дефис и точка. В фигурных скобках «{ }» я прописал, что символов должно быть не менее одного. Далее я закрываю проверяемый участок круглой скобкой и прописываю знак «.».

([A-z0-9_.-]{1,}).

Проверяем третий участок после знака «.». Открываем круглые скобки и в квадратных скобках прописываем снова, какие  буквы должны вводиться в поле. В моем примере это только латинские буквы. В фигурных скобках «{ }» я прописал, что символов должно быть от 2 до 8. Я так решил, потому что доменных зон меньше 2 и больше 8 символов я не видел (ru, info, ua, biz, com).

([A-z]{2,8})

На этом проверка правильного заполнения поля email адреса закончилась.

Или скажу так: вот шаблон адреса электронной почты, по которому нужно создать проверочный:

[email protected]

Итак, в итоге поле «email» будет выглядеть вот так:

<input type="email" name="email" pattern="([A-z0-9_.-]{1,})@([A-z0-9_.-]{1,}).([A-z]{2,8})" placeholder="Ваш E-mail" required />

Если нужно проверить на правильность заполнение поля телефона, пропишите в атрибуте «pattern» вот такое выражение:

pattern="\+([0-9]{1,3})(\([0-9]{2,3}\))-([0-9]{7})"

Для образца телефона:

+38(093)-ххххххх

pattern="\+([0-9]{1,3})(\([0-9]{2,3}\))-([0-9]{3})-([0-9]{2})-([0-9]{2})"

Для образца телефона:

+38(093)-ххх-хх-хх

Я думаю, здесь объяснять ничего не нужно, так как все аналогично верхнему примеру .

Итак, в итоге поле «tel» будет выглядеть вот так:

<input type="text" name="tel" pattern="\+([0-9]{1,3})(\([0-9]{2,3}\))-([0-9]{3})-([0-9]{2})-([0-9]{2})" placeholder="Ваш телефон"/>

В итоге вот такой получился код формы:

<form method="post" action="">
<p><input type="text" name="name" pattern="[А-Яа-яЁё]{4,}" placeholder="Ваше Имя"/></p>
<p><input type="email" name="email" pattern="([A-z0-9_.-]{1,})@([A-z0-9_.-]{1,}).([A-z]{2,8})" placeholder="Ваш E-mail" required /></p>
<p><input type="text" name="tel" pattern="\+([0-9]{1,3})(\([0-9]{2,3}\))-([0-9]{3})-([0-9]{2})-([0-9]{2})" placeholder="Ваш телефон"/></p>
<p><textarea name="quest" rows="6" cols="40" placeholder="Ваш вопрос"></textarea></p>
<input type="submit" name="subscribe" value="Отправить!"> .
</form>

Это еще не все, можно сделать подсказку пользователю, как правильно нужно заполнить поле, если он что-то ввел не так, как вам нужно.
5. Подсказка в случае, если поле было заполнено не правильно.
Если пользователь в поле ввел имя на латыни, например, «Stepa», а вам нужно на русском «Степа», можно написать всплывающую подсказку для пользователя и показать пример, как нужно заполнить.

title="Имя должно быть на русском. Пример: Степа, Петя, Вася, Оля"

Вот так это будет выглядеть в коде:

<input type="text" name="name" pattern="[А-Яа-яЁё]{4,}" placeholder="Ваше Имя" title="Имя должно быть на русском. Пример: Степа, Петя, Вася, Оля"/>

Вот так это будет выглядеть в коде:

В итоге получилась вот такая форма с проверкой на правильное заполнение на HTML5 без использования php или javascript:

<form method="post" action="">
<p><input type="text" name="name" pattern="[А-Яа-яЁё]{4,}" placeholder="Ваше Имя" title="Имя должно быть на русском. Пример: Степа, Петя, Вася, Оля"/></p>
<p><input type="email" name="email" pattern="([A-z0-9_.-]{1,})@([A-z0-9_.-]{1,}).([A-z]{2,8})" placeholder="Ваш E-mail" title="Пример: [email protected]" required /></p>
<p><input type="text" name="tel" pattern="\+([0-9]{1,3})(\([0-9]{2,3}\))-([0-9]{3})-([0-9]{2})-([0-9]{2})" placeholder="Ваш телефон" title="Пример: +380(93)-000-00-00"/></p>
<p><textarea name="quest" rows="6" cols="40" placeholder="Ваш вопрос"></textarea></p>
<input type="submit" name="subscribe" value="Отправить!"> .
</form>

[посмотреть результат]

Таблица регулярного выражения

Тему я еще не закрыл, ждите продолжения! Чтобы не пропустить новых статей, подписывайтесь на обновления блога.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: html, форма обратной связи

Новые поля ввода | Учебник HTML5

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

<form>

Name:

<input required type = «text»>

Email:

<input multiple type = «email»>

Phone:

<input pattern = [7(a0-9{)0-9]{3}7type  =  «tel»/>

Page:

<input type = «url»/>

Login:

<input placeholder = «Alphabetic symbols only» autocomplete = «no» type = «text»/> </form>

<input type=»text» list=»mydata» >

<datalist>

<option label=»(Сyперпользователь)» value=»Admin»>

<option label=»(Посетитель)» value=»User»>

Результат можно видеть на рис. 14.

Рис. 14. Формы с новыми полями

С самого начала надо принять как данность одну простую вещь. Атрибут type тега input больше не определяет внешнего вида полей формы. Он просто обозначает его тип, а способ отображения отдан на откуп воспроизводителям браузеров и других программ, занимающихся визуализацией HTML. Потому, в частности, внешний вид полей формы будет при просмотре в разных браузерах довольно сильно разниться. Это нормально, и пусть это вас не смущает.

<option labelX. Просто кот)” value=”Cat”> </datalist>

</form>

Ну а теперь пробежимся по новым элементам формы.

Первое поле вроде не представляет собой ничего примечательного, но, присмотревшись, у него можно заметить новый атрибут — required, означающий то, что это поле является обязательным для заполнения. Попытка отправить форму с пустым required-полем приведет к противодействию браузера (рис. 15).

Поле c типом email, как нетрудно догадаться, предназначено для ввода адреса электронной почты. Тут браузер должен проверять формальный синтаксис введенного адреса и сигнализировать при ошибке (рис. 16). Атрибут рultiple позволяет ввести несколько e-mail-адресов, разделяя их запятой.

Рис. 15. Проверка «обязательного» поля

Рис. 16. Проверка валидности заполнения

Далее следует поле типа tel. Оно, очевидно, предназначено для ввода телефона, но с ним все немножко сложнее. По первоначальной идее, он должен проверять подведенный текст на формальное соответствие телефонному номеру. Но сам по себе он вообще никаких ограничений на ввод не накладывает. Форматов телефонных номеров достаточно, способов их ввода — еще больше, и любое ограничение имеет хорошие шансы стать сильной головной болью для пользователя сайта. Так, может, этот тип вообще не нужен? Для обычных десктопов, может, и нет, а на мобильном устройстве факт предназначенности текстового поля для ввода телефонного номера помогает интерфейсу приспособиться под ввод. По крайней мере, iPhone уже прекрасно различает type=tel (или, например, e-mail).

Ну а корректность вводимых цифр или вообще формат ввода можно, в случае необходимости, проверить специальным атрибутом — pattern, сопоставляющим введенный текст регулярному выражению. Опять же проверку проведет браузер в момент отправки формы.

Поле типа url заставляет браузер произвести проверку на соответствие введенного текста формату url-адреса.

В следующем поле примечателен атрибут placeholder. В полном соответствии со своим названием он содержит текст, который отображается в поле ввода до заполнения (чаще всего это подсказка).

Второй атрибут — autocomplete — является долгожданной стандартизацией поведения браузера, впервые появившегося еще в IE 5.5. Autocomplete отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе. Его возможные значения — on, off, unspecefied.

Последнее поле — простое текстовое, но оно имеет атрибут list, являющийся ссылкой на объект <datalist>, служащий воплощением мечты многих верстальщиков. Его можно назвать сочетанием элемента select и текстового поля ввода с автоподстановкой. Как он работает, можно видеть на рис. 17. В поле со связанным атрибутом подставляются значения (value) из списка, а текст из атрибута label (не обязателен) служит поясняющей надписью.

Продолжим с новой формой:

<form>

Sum:

<input min = «-15» max = «15» step=»3″ type = «number» /> Age:

<input min = «5» max = «32» type = «range» />

Color:

<input type = «color» />

Page:

<input autofocus type = «search»/>

</form>

Рис. 17. Автоподстановка в стиле HTML5

Следующая форма выглядит более интересно (рис. 18). Первое поле ввода (type = «number») предназначено для ввода целочисленных значений. Его атрибуты min, m ax и step задают верхний, нижний пределы и шаг между значениями соответственно. Эти атрибуты предполагаются у всех элементов, имеющих численные показатели. Их значения по умолчанию зависят от типа элемента. Для управ-

Рис. 18. Еще немного полей

Ления такими значениями теперь существуют методы stepUp() и stepDown(), изменяющие значения элемента на шаг.

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

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

Следующий тип — color — в свете повсеместного вторжения в вебразметку графики, наверное, будет довольно актуален. Он, разумеется, предназначен для ввода значения цвета из палитры. Этот процесс показан на рис. 19, но вынужден сказать, что реализовано данное свойство еще далеко не везде.

Рис. 19. Выбор цвета с помощью input type = «color»

Поле со свойством type = р earch добавляет на ваш сайт поисковый движок. Поверили?

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

Теперь разберем еще одну форму, на этот раз с данными даты и времени:

«Неправильный номер!»/>

Результат — на рис. 20.

Рис. 20. Поля для ввода даты/времени

Первое поле предназначено для ввода даты. Как и в остальных случаях, обязательная задача браузера — отследить некорректные значения, способ же ввода может быть любым. Например, таким, как на рис. 21 (Opera 11.52). По-моему, очень удобно.

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

Рис. 21. Выбираем дату

Учета часового пояса (есть еще тип datetime-local, не учитывающий эту мелочь).

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

— month — позволяет вводить значение месяца. Вне зависимости от формы ввода (в некоторых реализациях это выпадающий список с названиями месяцев, в некоторых — календарик) значение будет формата «2012-03»;

— week — ввод недели. На сервер будет передано значение вроде 2012-W11, где 11 — номер недели в году.

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

Вам также могут быть интересны следующие статьи:

html — Обязательное поле прикрепление файла

Loading…

2. 0
3. +0
• Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
• Справка Подробные ответы на любые возможные вопросы
• Мета Обсудить принципы работы и политику сайта
• О нас Узнать больше о компании Stack Overflow
• Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
6. Войти Регистрация

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

Веб-программирование — HTML5 — Валидация форм

Поля в форме предназначены для сбора информации от посетителей страницы. Но несмотря на все усилия и объяснения, получение правильной информации может оказаться трудным делом. Нетерпеливые или невнимательные посетители могут пропускать важные поля, заполнять поле или несколько полей не полностью, да и попросту нажимать неправильные клавиши. Заполнив таким образом форму, они нажимают кнопку «Отправить», и серверная программа получает набор данных, с которыми она не знает что делать (если не реализована валидация данных на серверной стороне).

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

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

Создатели HTML5 смогли увидеть эту надобность и изобрели способ привлечь браузеры на помощь, переложив задачу проверки с плеч веб-разработчиков на веб-обозреватели. Создатели HTML5 разработали систему проверки на стороне клиента, которая позволяет вставлять основные правила валидации в любое поле <input>. Лучшее в этой системе — это ее простота и легкость: все, что нужно сделать — так это вставить правильный атрибут.

Как работает проверка HTML5?

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

Например, допустим, что определенное поле нельзя оставлять пустым, и посетитель должен ввести в него хоть что-то. В HTML5 это осуществляется с помощью атрибута required в соответствующем поле (далее дорабатываем пример из предыдущей статьи):

<input placeholder="Иван Иванов" autofocus required>

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

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

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

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

Опять же, ничего не будет, пока пользователь не нажмет кнопку для отправки формы. Только после этого браузер начнет проверять поля сверху вниз. Встретив первое некорректное значение, он прекращает дальнейшую проверку, отменяет отправку формы и выводит сообщение об ошибке рядом с полем, вызвавшим эту ошибку. (Кроме этого, если при заполнении формы область с полем ошибки вышла за пределы экрана, браузер прокручивает экран, чтобы это поле находилось вверху страницы.) После того как пользователь исправит данную ошибку и опять нажмет кнопку для отправки формы, браузер остановится на следующей ошибке ввода и процесс повторится.

Отключение проверки

В некоторых случаях может потребоваться отключить проверку. Например, вы хотите протестировать свой серверный код на правильность обработки поступивших некорректных данных. Чтобы отключить проверку для всей формы, в элемент <form> добавляется атрибут novalidate:

<form action="#" novalidate>

Другой подход — это отключить проверку в кнопке для отправки формы. Такой способ иногда полезен в настоящей веб-странице. Например, вместо отправки, может быть, требуется сохранить наполовину заполненную форму для дальнейшего использования. Чтобы получить такую возможность, в элемент <input> соответствующей кнопки вставляется атрибут formnovalidate:

<input type="submit" value="Отправить информацию" formnovalidate>

Обнаружение незаполненных полей — это только один из нескольких типов проверки. Позже мы рассмотрим обнаружение ошибок в данных разных типов.

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

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

Данный скрипт я использовал при создании сайта www.prtut.ru.

Демонстрация скрипта

В примере все поля обязательны для заполнения.

Описание

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

<INPUT TYPE=TEXT NAME="User Name" required>

Форма содержащая элементы ввода вызывает функцию checkRequired() при событии ONSUBMIT. В функцию передается лишь один параметр — имя формы. Для этой цели используется объект this который указывает на форму активную в данный момент.

<FORM NAME="demo" ONSUBMIT="return checkRequired(this)">

Функция checkRequired() проверяет каждый элемент в форме на наличие аттрибута required. Если атрибут обнаружен , то проверяется был ли сделан ввод.

JavaScript

function isEmpty(str)
 {
  // Проверка на пустую строку.
  for (var intLoop = 0; intLoop 

Так как проверка выполняется на стороне клиента, и скрипт работает непосредственно в браузере пользователя, в Google Chrome, Mozilla Firefox, Opera и Яндекс.Браузер предупреждения смотрятся по разному:

Вот и все. Готово!

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru