diff options
| author | Roma Zvarich <hisbvdis@gmail.com> | 2021-07-12 09:39:19 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-07-12 09:39:19 +0300 |
| commit | 49a504a0f8c23a376efdb76678796b842e66d706 (patch) | |
| tree | 55b184e8e06a84d73afdd7d3b9e01dd9f3c6058f /files/ru/learn | |
| parent | 9f772eed6edb8f39346fcda1637149ffcb4673f1 (diff) | |
| download | translated-content-49a504a0f8c23a376efdb76678796b842e66d706.tar.gz translated-content-49a504a0f8c23a376efdb76678796b842e66d706.tar.bz2 translated-content-49a504a0f8c23a376efdb76678796b842e66d706.zip | |
Обновление перевода "Client-side form validation" (#1446)
* Start
* Translate finished
* Update files/ru/learn/forms/form_validation/index.html
Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com>
* Update files/ru/learn/forms/form_validation/index.html
Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com>
* Update files/ru/learn/forms/form_validation/index.html
Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com>
* Update files/ru/learn/forms/form_validation/index.html
Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com>
* Update files/ru/learn/forms/form_validation/index.html
Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com>
* Update files/ru/learn/forms/form_validation/index.html
Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com>
* Update files/ru/learn/forms/form_validation/index.html
Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com>
* Update files/ru/learn/forms/form_validation/index.html
Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com>
* Update files/ru/learn/forms/form_validation/index.html
Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com>
* Image deleted
Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com>
Diffstat (limited to 'files/ru/learn')
| -rw-r--r-- | files/ru/learn/forms/form_validation/index.html | 880 |
1 files changed, 409 insertions, 471 deletions
diff --git a/files/ru/learn/forms/form_validation/index.html b/files/ru/learn/forms/form_validation/index.html index 60d63b9d75..d137b8841d 100644 --- a/files/ru/learn/forms/form_validation/index.html +++ b/files/ru/learn/forms/form_validation/index.html @@ -1,154 +1,146 @@ --- -title: Проверка данных формы (проверка валидности формы на стороне клиента) +title: Валидация форм на стороне клиента slug: Learn/Forms/Form_validation -translation_of: Learn/Forms/Form_validation -original_slug: Learn/HTML/Forms/Валидация_формы +tags: + - Новичку + - Пример + - Формы + - Гайд + - HTML + - JavaScript + - Изучение + - Web + - regex --- -<p> - <audio class="audio-for-speech"></audio> -</p> +<div>{{LearnSidebar}}</div> -<div class="translate-tooltip-mtz" style="left: 0px; top: 3716px;"> -<div class="header"> -<div class="header-controls"></div> +<div>{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</div> -<div class="translate-icons"><img class="from"> <img class="arrow"> <img class="to"></div> -</div> - -<div class="translated-text"> -<div class="words"></div> - -<div class="sentences"> -<div class="translated-sentence-wrapper sound-anchor"> -<div class="translated-sentence word-text"><</div> - -<div class="buttons"></div> -</div> - -<div class="translit"><</div> -</div> -</div> -</div> - -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}</div> - -<p class="summary">Проверка данных формы позволяет нам удостовериться в том, что пользователи заполняют форму в правильном формате, убедиться, что отправленные данные будут успешно работать с нашими приложениями. Эта статья расскажет, что вам нужно знать о проверке формы.</p> +<p>Перед отправкой данных на сервер важно убедиться, что все обязательные поля формы заполнены данными в корректном формате. Это называется <strong>валидацией на стороне клиента</strong> и помогает убедиться, что данные, введённые в каждый элемент формы, соответствуют требованиям. Данная статья проведёт вас через основные концепци и примеры валидации на стороне клиента.</p> <table class="learn-box standard-table"> <tbody> <tr> - <th scope="row">Предпосылки:</th> - <td>Компьютерная грамотность, разумное понимание <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, и <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</td> + <th scope="row">Начальные требования:</th> + <td>Владение компьютером, достаточное понимание <a href="/ru/docs/Learn/HTML">HTML</a>, <a href="/ru/docs/Learn/CSS">CSS</a>, и <a href="/ru/docs/Learn/JavaScript">JavaScript</a>.</td> </tr> <tr> - <th scope="row">Задача:</th> - <td>Понимать что такое проверка формы (валидация) формы, почему это важно и как это реализовать.</td> + <th scope="row">Цель:</th> + <td>Понять, что такое валидация на стороне клиента, почему это важно и как применять различные техники для её реализации.</td> </tr> </tbody> </table> -<h2 id="Что_такое_валидация_формы">Что такое валидация формы?</h2> +<p>Валидация на стороне клиента — это первичная проверка введённых данных, которая существенно улучшает удобство взаимодействия с интерфейсом; обнаружение некорректных данных на стороне клиента позволяет пользователю немедленно их исправить. Если же проверка происходит только на сервере, процесс заполнения может быть более трудоёмким, так как требует повторения одних и тех же действий отправки данных на сервер для получения обратного ответа с сообщением о том, что нужно исправить.</p> + +<p>Однако, <em>не следует рассматривать</em> валидацию на стороне клиента как достаточную меру безопасности! Любые данные, отправляемые через форму, необходимо <em>дополнительно</em> проверять на безопасность и <em>на стороне сервера</em>, поскольку валидацию на стороне клиента достаточно просто обойти и она может не остановить злоумышленников. Чтобы лучше понимать потенциальные угрозы, рекомендуем ознакомиться с разделом <a href="/ru/docs/Learn/Server-side/First_steps/Website_security">Безопасность вебсайтов</a>; валидация на стороне сервера выходит за рамки этого модуля, но о ней следует помнить.</p> -<p>Откройте любой популярный сайт с формой регистрации и вы заметите, что они дают вам обратную связь, когда вы вводите ваши данные не в том формате, который они ожидают от вас. Вы получите подобные сообщения:</p> +<h2 id="What_is_form_validation">Что такое валидация формы?</h2> + +<p>Зайдите на любой популярный сайт, имеющий форму регистрации. Вы заметите, что при вводе данных в неправильном формате, пользователя сразу уведомляют о наличии проблемы. Вы получите примерно такое сообщение:</p> <ul> - <li>"Это поле обязательно для заполнения" (вы не можете оставить это поле пустым)</li> - <li>"Пожалуйста введите ваш телефонный номер в формате xxx-xxxx" (вводит три цифры разделённые тире, за ними слеуют четыре цифры)</li> - <li>"Пожалуйста введите настоящий адрес электронной почты" (если ваша запись не в формате"somebody@example.com")</li> - <li>"Ваш пароль должен быть от 8 до 30 символов длиной, и содержать одну заглавную букву, один символ, и число"</li> + <li>"Обязательное поле" (Вы не можете оставить поле пустым).</li> + <li>"Пожалуйста, введите номер телефона в формате xxx-xxxx" (Чтобы данные считались корректными, их необходимо указать в определённом формате).</li> + <li>"Пожалуйста, введите корректный email-адрес" (вы ввели данные в неправильном формате).</li> + <li>"Длина пароля должна быть от 8 до 30 символов и включать одну заглавную букву, один символ, и одну цифру." (Требования к формату данных достаточно конкретные).</li> </ul> -<p>Это называется валидация формы — когда вы вводите данные, веб-прилолжение проверяет, что данные корректны. Если данные верны, приложение позволяет данным быть отправленными на сервер и (как правило) быть сохранёнными в базе данных; если нет - оно выдаёт вам сообщение об ошибке, обьясняющее какие исправления необходимо внести. Проверка формы может быть реализована несколькими различными способами.</p> +<p>Это называется <strong>валидацией формы</strong>. По мере ввода, браузер и/или сервер проверяют данные, чтобы определить, соответствуют ли они требуемому формату. Валидация, выполняемая в браузере, называется <strong>валидацией на стороне клиента</strong>, а выполняемая на сервере — <strong>валидацией на стороне сервера</strong>. В этом разделе мы сосредоточимся на валидации, выполняемой на стороне клиента. + +<p>Если формат корректен, приложение позволяет отправить данные на сервер и (обычно) сохранить в базу данных; в противном случае выводится сообщение с описанием того, что нужно исправить, позволяя ввести данные снова.</p> -<p>Мы хотим сделать заполнение веб-форм максимально простым. Итак, почему мы настаиваем на подтверждении наших форм? Существуют три основные причины:</p> +<p>Мы хотим максимально упростить заполнение веб-форм. Тогда почему мы настаиваем валидации данных? На это есть три основные причины:</p> <ul> - <li><strong>Мы хотим получить нужные данные в нужном формате</strong> — наши приложения не будут работать должным образом, если данные нашего пользователя хранятся в неправильном формате, если они вводят неправильную информацию или вообще не передают информацию.</li> - <li><strong>Мы хотим защитить учётные записи наших пользователей</strong> — заставляя наших пользователей вводить защищённые пароли, это упрощает защиту информации об их учётной записи.</li> - <li><strong>Мы хотим обезопасить себя</strong> — существует множество способов, которыми злоумышленники могут злоупотреблять незащищёнными формами, чтобы повредить приложение, в которое они входят (см. <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Website_security">Безопасность веб-сайта</a>).</li> + <li><strong>Мы хотим получать правильные данные в правильном формате.</strong> Наши приложения не будут работать должным образом, если данные от пользователей хранятся в неправильном формате, некорректны сами по себе или вовсе пропущены.</li> + <li><strong>Мы хотим защитить данные пользователей</strong>. Принуждение пользователей вводить надёжные пароли облегчает защиту их аккаунтов.</li> + <li><strong>Мы хотим защитить себя</strong>. Существует множество способов, позволяющих злоумышленникам с помощью незащищённых форм навредить приложению (смотрите <a href="/ru/docs/Learn/Server-side/First_steps/Website_security">Безопасность вебсайтов</a>).<br> + {{warning("Никогда не доверяйте данным, передаваемым на сервер клиентской программой. Даже если ваша форма правильно валидируется и не допустит введение потенциально вредоносных данных на стороне клиента, злоумышленники по-прежнему могут изменить сетевой запрос.")}}</li> </ul> -<h3 id="Различные_типы_валидации_формы">Различные типы валидации формы</h3> +<h2 id="Different_types_of_client-side_validation">Типы валидации на стороне клиента</h2> -<p>Существует два разных типа проверки формы, с которыми вы столкнётесь в Интернете:</p> +<p>Существует два типа валидации на стороне клиента, с которыми вы столкнётесь в Интернете:</p> <ul> - <li><strong>Проверка на стороне клиента - </strong>это проверка, которая происходит в браузере, прежде чем данные будут отправлены на сервер. Это удобнее, чем проверка на стороне сервера, так как даёт мгновенный ответ. Её можно далее подразделить на: - - <ul> - <li><strong>JavaScript</strong> проверка выполняется с использованием JavaScript. Полностью настраиваемая.</li> - <li><strong>Встроенная проверка формы, </strong>используя функции проверки формы HTML5. Для этого обычно не требуется JavaScript. Встроенная проверка формы имеет лучшую производительность, но она не такая настраиваемая, как с использованием JavaScript.</li> - </ul> - </li> - <li><strong>Проверка на стороне сервера</strong> - это проверка, которая возникает на сервере после отправки данных. Серверный код используется для проверки данных перед их сохранением в базе данных. Если данные не проходят проверку валидности, ответ отправляется обратно клиенту, чтобы сообщить пользователю, какие исправления должны быть сделаны. Проверка на стороне сервера не такая удобная, как проверка на стороне клиента, поскольку она не выдаёт ошибок до тех пор, пока не будет отправлена вся форма. Тем не менее, проверка на стороне сервера - это последняя линия защиты вашего приложения от неправильных или даже вредоносных данных. Все популярные <a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">серверные фреймворки</a> имеют функции для проверки и очистки данных (что делает их безопасными).</li> + <li><strong>Встроенная валидация форм</strong> использует функционал валидации HTML5, который мы неоднократно обсуждали в этом модуле. HTML5-валидация обычно не требует большого количества JavaScript-кода и демонстрирует лучшую производительность, но не настолько настраиваема, как валидация с помощью JavaScript.</li> + <li><strong>JavaScript-валидация</strong> кодируется с помощью JavaScript. Она полностью настраиваема, но требует программирования всей логики (или использования библиотеки).</li> </ul> -<p>В реальном мире разработчики склонны использовать комбинацию проверки на стороне клиента и сервера.</p> +<h2 id="Using_built-in_form_validation">Использование встроенной валидации форм</h2> -<h2 id="Использование_встроенной_проверки_формы">Использование встроенной проверки формы</h2> +<p>Одной из самых важных функций <a href="/en-US/docs/Learn/Forms/HTML5_input_types">элементов форм HTML5</a> является способность валидировать бóльшую часть пользовательских данных без использования JavaScript. Это выполняется с помощью атрибутов валидации у элементов формы. Многие из них мы уже рассмотрели в этом курсе:</p> -<p>Одной из особенностей HTML5 является возможность проверки большинства пользовательских данных без использования скриптов. Это делается с помощью <a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5/Constraint_validation">атрибутов проверки элементов формы</a>, которые позволяют вам указывать правила ввода формы, например, нужно ли заполнять значение, минимальная и максимальная длина данных, должно ли это быть число, адрес электронной почты, адрес или что-то ещё, и шаблон, которому это должно соответствовать. Если введённые данные соответствуют всем этим правилам, данные считаются валидными; если нет - невалидными.</p> +<ul> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/required">required</a></code>: Определяет, что для отправки формы данное поле предварительно должно быть заполнено.</li> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/minlength">minlength</a></code> и <code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>: Задаёт минимальную и максимальную длину текстовых данных (строк)</li> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code> и <code><a href="/en-US/docs/Web/HTML/Attributes/max">max</a></code>: Задаёт минимальное и максимальное значение для поля, расчитанного на числовой тип данных</li> + <li><code>type</code>: Определяет тип данных, на который рассчитано поле: число, email-адрес или какой-то другой предустановленный тип</li> + <li><code><a href="/ru/docs/Web/HTML/Attributes/pattern">pattern</a></code>: С помощью <a href="/ru/docs/Web/JavaScript/Guide/Regular_Expressions">регулярного выражения</a>, определяет шаблон, которому должны соответствовать вводимые данные.</li> +</ul> + +<p>Если данные, введённые в поле формы, соответствуют правилам перечисленных выше атрибутов, они считаются валидными, если нет — не валидными</p> -<p>Когда элемент валидный, следующие утверждения верны:</p> +<p>Когда элемент валиден, справедливы следующие утверждения:</p> <ul> - <li>Элемент соответствует CSS псевдоклассу {{cssxref(":valid")}} ; это позволяет вам применить конкретный стиль к валидным элементам.</li> - <li>Если пользователь пытается отправить данные, браузер отправит форму, если нет ничего, остановит отправку (например, JavaScript).</li> + <li>Элемент соответствует CSS-псевдоклассу {{cssxref(":valid")}}, позволяющему стилизовать только валидные элементы.</li> + <li>Если пользователь пытается отправить данные, браузер отправит форму при условии, что ничто другое (например, JavaScript) не помешает ему это сделать</li> </ul> -<p>Когда элемент невалидный, следующие утверждения верны:</p> +<p>Когда элемент не валиден, справедливы следующие утверждения:</p> <ul> - <li>Элемент соответствует CSS псевдоклассу {{cssxref(":invalid")}}, и иногда другим UI псевдоклассам (например, {{cssxref(":out-of-range")}}), в зависимости от ошибки; это позволяет вам применить конкретный стиль к невалидным элементам.</li> - <li>Если пользователь пытается отправить данные, браузер заблокирует форму и выдаст сообщение об ошибке.</li> + <li>Элемент соответствует CSS-псевдоклассу {{cssxref(":invalid")}} или, в зависимости от ошибки, другим псевдоклассам (например, {{cssxref(":out-of-range")}}), которые позволяют применять определённые стили к элементам, не являющимся валидными.</li> + <li>Если пользователь пытается отправить данные, браузер заблокирует форму и выведет сообщение об ошибке.</li> </ul> -<div class="blockIndicator note"> -<p>Note: Вот несколько ошибок, которые не позволяют форме быть подтверждённой: {{domxref('validityState.badInput', 'badInput')}}, {{domxref('validityState.patternMismatch','patternMismatch')}}, {{domxref('validityState.rangeOverflow','rangeOverflow')}} or {{domxref('validityState.rangeUnderflow','rangeUnderflow')}}, {{domxref('validityState.stepMismatch','stepMismatch')}}, {{domxref('validityState.tooLong','tooLong')}} or {{domxref('validityState.tooShort','tooShort')}}, {{domxref('validityState.typeMismatch','typeMismatch')}}, {{domxref('validityState.valueMissing','valueMissing')}}, or a {{domxref('validityState.customError','customError')}}.</p> +<div class="notecard note"> +<p><strong>Примечание</strong>: Существует ошибки, которые не позволяют отправлять форму, в частности {{domxref('validityState.badInput', 'badInput')}}, {{domxref('validityState.patternMismatch','patternMismatch')}}, {{domxref('validityState.rangeOverflow','rangeOverflow')}} или {{domxref('validityState.rangeUnderflow','rangeUnderflow')}}, {{domxref('validityState.stepMismatch','stepMismatch')}}, {{domxref('validityState.tooLong','tooLong')}} или {{domxref('validityState.tooShort','tooShort')}}, {{domxref('validityState.typeMismatch','typeMismatch')}}, {{domxref('validityState.valueMissing','valueMissing')}}, или {{domxref('validityState.customError','customError')}}.</p> </div> -<h2 id="Примеры_встроенных_форм_валидации">Примеры встроенных форм валидации</h2> +<h2 id="Built-in_form_validation_examples">Примеры встроенной валидации форм</h2> -<h3 id="Ограничения_проверки_элементов_input_-_простое_начало">Ограничения проверки элементов input - простое начало</h3> +<p>В этом разделе мы протестируем некоторые из атрибутов, которые обсуждали выше.</p> -<p>В этом разделе мы рассмотрим некоторые функции HTML5, которые можно использовать для проверки {{HTMLElement("input")}} элементов.</p> +<h3 id="Simple_start_file">Простой начальный файл</h3> -<p>Начнём с простого примера - input, который позволяет вам выбирать ваш любимый плод между бананом и вишней. Он включает простой текст {{HTMLElement("input")}} соответствующий ярлык (label) и отправку (submit) {{htmlelement("button")}}. Вы можете найти исходный код на GitHub <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>,и живой пример ниже:</p> +<p>Давайте начнём с простого примера: поле, позволяющее указать своё предпочтение — банан или вишня. Этот пример включает обычное текстовое поле {{HTMLElement("input")}}, связанный с ним элемент {{htmlelement("label")}} и кнопку отправки формы {{htmlelement("button")}}. Исходный код можно найти на GitHub по адресу <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>, а ниже приведён рабочий пример.</p> -<pre class="notranslate"><form> +<pre class="brush: html"><form> <label for="choose">Would you prefer a banana or cherry?</label> <input id="choose" name="i_like"> <button>Submit</button> </form></pre> -<pre class="notranslate">input:invalid { +<pre class="brush: css">input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; -} -</pre> +}</pre> <p>{{EmbedLiveSample("Simple_start_file", "100%", 80)}}</p> -<p>Для начала сделаем копию <code>fruit-start.html</code>в новом каталоге на жёстком диске.</p> +<p>Для начала скопируйте файл <code>fruit-start.html</code> в новую папку на вашем жёстком диске.</p> -<h3 id="Требуемый_атрибут_required">Требуемый атрибут (required)</h3> +<h3 id="The_required_attribute">Атрибут required</h3> -<p>Простейшей функцией проверки HTML5 для использования является {{htmlattrxref("required", "input")}} атрибут. Если вы хотите сделать ввод обязательным, вы можете пометить элемент, используя этот атрибут. Если этот атрибут установлен, форма не будет отправляться (и будет отображаться сообщение об ошибке), когда поле пустое (поле input также будет считаться невалидным).</p> +<p>Самым простым в HTML5-валидации является атрибут <code><a href="/en-US/docs/Web/HTML/Attributes/required">required</a></code>. Добавьте его к элементу, чтобы сделать заполнение обязательным. Элемент с данным атрибутом соответствует CSS-псевдоклассу {{cssxref(':required')}}, а если поле ввода пустое, вместо отправки формы отобразится сообщение об ошибке. Пока поле пустое, оно также будет соответствовать CSS-псевдоклассу {{cssxref(':invalid')}}.</p> -<p>Добавьте атрибут <code>required</code> в ваш input, как показано ниже:</p> +<p>Добавьте к полю атрибут <code>required</code>, как показано ниже.</p> -<pre class="brush: html notranslate"><form> - <label for="choose">Would you prefer a banana or cherry?</label> +<pre class="brush: html"><form> + <label for="choose">Would you prefer a banana or cherry? (required)</label> <input id="choose" name="i_like" required> <button>Submit</button> </form></pre> -<p>Также обратите внимание на CSS, включённый в файл примера:</p> +<p>Обратите внимание на CSS, который включён в файл примера:</p> -<pre class="notranslate">input:invalid { +<pre class="brush: css">input:invalid { border: 2px dashed red; } @@ -160,61 +152,50 @@ input:valid { border: 2px solid black; }</pre> -<p>В этом случае к input будет применяться ярко-красный пунктирный border, когда он невалидный, и более тонкая чёрная граница, когда он валидный. Попробуйте новое поведение в приведённом ниже примере:</p> +<p>Данный CSS задаёт полю красную пунктирную рамку, когда оно не валидно, а когда валидно — сплошную чёрную. Мы также добавили фоновый градиент для обязательных не валидных полей. Проверьте новое поведение в примере ниже:</p> <p>{{EmbedLiveSample("The_required_attribute", "100%", 80)}}</p> -<div class="blockIndicator note"> -<p>Note: вы можете найти этот пример на GitHub как <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-required.html">fruit-validation.html</a> (также смотрите <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-required.html">source code</a>.)</p> +<div class="notecard note"> +<p><strong>Примечание</strong>: Рабочий пример можно найти на GitHub по адресу <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-required.html">fruit-validation.html</a> (отдельно можно найти <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-required.html">исходный код</a>.)</p> </div> -<p>Попробуйте эту форму без значения. Обратите внимание как невалидный ввод получает фокус, сообщение об ошибке ("Пожалуйста заполните поле") появляется, и форма не отправляется.</p> +<p>Попробуйте отправить форму без введения значения. Обратите внимание, что не валидное поле получает фокус, появляется сообщение об ошибке ("Заполните это поле") и блокируется отправка формы.</p> -<h3 id="Проверка_с_регулярными_выражениями">Проверка с регулярными выражениями</h3> +<p>Наличие атрибута <code>required</code> у любого элемента, который его поддерживает, означает, что элемент соответствует CSS-псевдоклассу {{cssxref(':required')}}, независимо от того, имеет он значение или нет. Если элемент {{HTMLElement("input")}} не содержит значение, он будет соответствовать псевдоклассу {{cssxref(':invalid')}}.</p> -<p>Другая полезная функция проверки - это <kbd><a href="/ru/docs/Web/SVG/%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82/pattern">pattern</a> </kbd>атрибут , который ожидает <a href="/en-US/docs/JavaScript/Guide/Regular_Expressions">Regular Expression</a> в качестве значения. Регулярное выражение (regex) - это шаблон который используется для проверки соответствия символов в текстовых строках, поэтому он идеально подходит для проверки формы, а также для многих других целей в JavaScript.</p> +<div class="notecard note"> +<p><strong>Примечание</strong>: Для повышения удобства взаимодействия указывайте пользователям, какие поля являются обязательными. К тому же, этого требует руководство по обеспечению <a href="/ru/docs/Learn/Accessibility">доступности</a> WCAG. Требуйте обязательного ввода только тех данных, которые вам действительно нужны: например, так ли важно знать пол или должность пользователя?</p> +</div> -<p>Регулярные выражения довольно сложны, и мы не будем подробно разбирать их в этой статье. Ниже приведены некоторые примеры, чтобы вы представляли себе, как они работают:</p> +<h3 id="Validating_against_a_regular_expression">Валидация с помощью регулярного выражения</h3> -<ul> - <li><code>a</code> — соответствует одному символу <code>a</code> (не <code>b</code>, не <code>aa</code>, и т.д..)</li> - <li><code>abc</code> — соответствует <code>a</code>, далее <code>b</code>, далее <code>c</code>.</li> - <li><code>a*</code> — соответствует символу <code>a</code>, 0 или более раз (<code>+</code> соответствует символу один или несколько раз).</li> - <li><code>[^a]</code> — соответствует одному символу, <strong>не </strong>a.</li> - <li><code>a|b</code> — соответствует одному символу a или b.</li> - <li><code>[abc]</code> — соответствует одному символу a, b, или c.</li> - <li><code>[^abc]</code> — соответствует одному символу кроме a, b, или c.</li> - <li><code>[a-z]</code> — соответствует одному символу в диапазоне a–z, только в нижнем регистре (вы можете использовать <code>[A-Za-z]</code> для заглавных и прописных букв, и<code>[A-Z]</code> только для заглавных букв).</li> - <li><code>a.c</code> — соответствует <code>a</code>, за ним следует любой элемент, за ним следует <code>c</code>.</li> - <li><code>a{5}</code> — соответствует <code>a</code>, 5 раз.</li> - <li><code>a{5,7}</code> — соответствует <code>a</code>, от 5 до 7 раз, но не больше и не меньше.</li> -</ul> +<p>Ещё одной полезной функцией валидации является атрибут <a href="/ru/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>, который в виде значения принимает <a href="/ru/docs/Web/JavaScript/Guide/Regular_Expressions">Регулярное выражение</a>. Регулярное выражение (regex) — это шаблон, который может быть использован для сопоставления набора символов в текстовой строке, поэтому они идеально подходят для валидации формы и используются для множества других целей в JavaScript.</p> -<p>Вы также можете использовать числа и другие символы в этих выражениях, например:</p> +<p>Регулярные выражения достаточно сложны и мы не подем подробно рассматривать эту тему в данной статье. Ниже приведены несколько примеров, чтобы дать вам представление о том, как они работают.</p> <ul> - <li><code>[ -]</code> — соответствует пробелу или тире.</li> - <li><code>[0-9]</code> — соответствует любой цифре в диапазоне от 0 до 9.</li> + <li><code>a</code> — Соответствует одному символу <code>a</code> (не <code>b</code>, не <code>aa</code>, и так далее).</li> + <li><code>abc</code> — Соответствует символу <code>a</code>, за которой следует <code>b</code>, за которой следует <code>c</code>.</li> + <li><code>ab?c</code> — Соответствует символу <code>a</code>, за которым опционально может следовать <code>b</code>, за которым следует <code>c</code>. ( <code>ac</code> или <code>abc</code>)</li> + <li><code>ab*c</code> — Соответствует символу <code>a</code>, за которым опционально может следовать любое количество символов <code>b</code>, за которыми следует <code>c</code>. ( <code>ac</code> , <code>abc</code>, <code>abbbbbc</code>, и так далее).</li> + <li><code>a|b</code> — Соответствует символу <code>a</code> или <code>b</code>.</li> + <li><code>abc|xyz</code> — Соответствует в точности <code>abc</code> или в точности <code>xyz</code> (но не <code>abcxyz</code> или <code>a</code> или <code>y</code>, и так далее).</li> </ul> -<p>Вы можете комбинировать их практически, как хотите, указывая разные части, одну за другой:</p> - -<ul> - <li><code>[Ll].*k</code> — Один символ L, в верхнем или нижнем регистре, за ним следует ни одного или несколько символов любого типа за которыми следует <code>k</code> в нижнем регистре.</li> - <li><code>[A-Z][A-Za-z' -]+</code> — Один символ верхнего регистра, за которым следует один или несколько символов, которые представляют собой букву верхнего или нижнего регистра, тире, апостроф или пробел. Это можно использовать для проверки названия городов / городов англоязычных стран, которые должны начинаться с заглавной буквы, но не содержать других символов. Примеры из UK включая Manchester, Ashton-under-lyne, и Bishop's Stortford.</li> - <li><code>[0-9]{3}[ -][0-9]{3}[ -][0-9]{4}</code> — Внутренний телефонный номер США — три цифры, затем пробел или тире, затем три цифры,затем пробел или тире, затем четыре цифры. Возможно, вам придётся сделать это более сложным, поскольку некоторые люди пишут свой код области в круглых скобках, но это работает для простой демонстрации.</li> -</ul> +<p>Есть еще много возможностей, которые мы не упомянули. Полный список со множеством примеров можно найти в документации по <a href="/ru/docs/Web/JavaScript/Guide/Regular_Expressions">Регулярным выражениям</a></p> -<p>В любом случае, давайте реализуем пример - обновим ваш HTML, чтобы добавить атрибут шаблона, например:</p> +<p>Давайте рассмотрим пример. Добавьте в атрибут <a href="/ru/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> следующий шаблон:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <label for="choose">Would you prefer a banana or a cherry?</label> - <input id="choose" name="i_like" required pattern="banana|cherry"> + <input id="choose" name="i_like" required pattern="[Bb]anana|[Cc]herry"> <button>Submit</button> -</form></pre> +</form> +</pre> <div class="hidden"> -<pre class="brush: css notranslate">input:invalid { +<pre class="brush: css">input:invalid { border: 2px dashed red; } @@ -223,34 +204,46 @@ input:valid { }</pre> </div> -<p>{{EmbedLiveSample("Validating_against_a_regular_expression", "100%", 50)}}</p> +<p>Это даёт нам следующее обновление — опробуйте его:</p> + +<p>{{EmbedLiveSample("Validating_against_a_regular_expression", "100%", 80)}}</p> -<p>В этом примере {{HTMLElement("input")}} элемент принимает одно из двух возможных значений: строку "banana" или строку "cherry".</p> +<div class="notecard note"> +<p><strong>Примечание</strong>: Рабочий пример можно найти на GitHub по адресу <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-pattern.html">fruit-pattern.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-pattern.html">исходный код</a>.)</p> +</div> -<p>На этом этапе попробуйте изменить значение внутри атрибута <code>pattern</code> чтобы сопоставить некоторые из примеров, которые вы видели ранее, и посмотрите, как это влияет на значения, которые вы можете ввести, чтобы сделать входное значение валидным. Попробуйте написать свои собственные, и посмотрите, как это работает! Попробуйте сделать их связанными с фруктами, где это возможно, поэтому ваши примеры имеют смысл!</p> +<p>В этом примере элемент {{HTMLElement("input")}} принимает одно из четырёх возможных значений: строку "banana", "Banana", "cherry", или "Cherry". Регулярные выражения чувствительны к регистру, но с помощью шаблона "Aa", вложенного в квадратные скобки, мы сделали поддержку написания слова как с большой, так и с маленькой буквы.</p> -<div class="note"> -<p><strong>Примечание:</strong> Некоторые {{HTMLElement("input")}} типы элементов не нуждаются в атрибуте {{htmlattrxref("pattern","input")}} чтобы быть валидными. Указание типа <code>email</code> например, проверяет введённое значение через регулярное выражение, соответствующее хорошо сформированному адресу электронной почты (или списку email адресов, разделённых запятыми, если в нем присутствует атрибут {{htmlattrxref("multiple","input")}} attribute). В качестве ещё одного примера, поле с типом <code>url</code> автоматически требует правильно сформированного URL.</p> +<p>Подставьте в атрибут <a href="/ru/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> приведённые выше примеры регулярных выражений, и посмотрите, как это повлияет на валидацию введённого в поле значения. Попробуйте написать свои шаблоны проверки и посмотрите, что получится. По возможности, делайте их связанными с фруктами, чтобы примеры имели смысл.</p> + +<p>Если не пустое значение элемента {{HTMLElement("input")}} не соответствует шаблону регулярного выражения, <code>input</code> будет соответствовать псевдоклассу {{cssxref(':invalid')}}.</p> + +<div class="notecard note"> +<p><strong>Примечание:</strong> Некоторым типам элементов {{HTMLElement("input")}} для валидации с помощью регулярного выражения не требуется атрибут <a href="/ru/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>. Например, поле с типом <code>email</code> валидирует значение по шаблону одного email-адреса или, если присутствует атрибут <a href="/en-US/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a>, шаблону списка email-адресов, разделённых запятыми.</p> </div> -<div class="note"> -<p><strong>Примечание</strong>: Элемент {{HTMLElement("textarea")}} не поддерживает атрибут {{htmlattrxref("pattern","input")}}.</p> +<div class="notecard note"> +<p><strong>Примечание</strong>: Элемент {{HTMLElement("textarea")}} не поддерживает атрибут <a href="/ru/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>.</p> </div> -<h3 id="Ограничение_длины_ваших_записей">Ограничение длины ваших записей</h3> +<h3 id="Constraining_the_length_of_your_entries">Ограничение длины вводимых значений</h3> + +<p>Можно ограничить максимально допустимое количество символов для текстовых полей {{HTMLElement("input")}} или {{HTMLElement("textarea")}} используя атрибуты <a href="/en-US/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a> и <code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>. Поле будет не валидным, если количество символов его содержимого будет меньше <a href="/en-US/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a> или больше <code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>.</p> -<p>Все текстовые поля, созданные с помощью элементов ({{HTMLElement("input")}} или {{HTMLElement("textarea")}}) могут быть ограничены по размеру, используя атрибуты {{htmlattrxref("minlength","input")}} и{{htmlattrxref("maxlength","input")}}. Поле невалидно если его значение короче чем {{htmlattrxref("minlength","input")}} или значение длиннее значения {{htmlattrxref("maxlength","input")}}. Браузеры часто не позволяют пользователю вводить более длинное значение, чем ожидалось, в текстовые поля в любом случае, но полезно иметь этот мелкозернистый элемент управления.</p> +<p>Зачастую браузеры не позволяют пользователям вводить в текстовое поле значение, длина которого превышает максимально допустимую. Можно существенно повысить удобство использования, если помимо ограничения в атрибуте <code>maxlength</code> добавить доступный индикатор, отображающий текущее и максимально допустимое количество символов, что даст пользователю возможность уместить содержимое в заданные рамки. Хорошим примером является окно написания твита в Twitter. Для реализации такого функционала можно использовать JavaScript, включая <a href="https://github.com/mimo84/bootstrap-maxlength">решения, использующие <code>maxlength</code></a>.</p> -<p>Для числовых полей (например <code><input type="number"></code>), атрибуты {{htmlattrxref("min","input")}} и {{htmlattrxref("max","input")}} также обеспечивают ограничение валидации. Если значение поля меньше атрибута {{htmlattrxref("min","input")}} или больше атрибута {{htmlattrxref("max","input")}}, поле будет невалидным.</p> +<h3 id="Constraining_the_values_of_your_entries">Ограничение допустимых значений</h3> -<p>Давайте посмотрим на другой пример. Создайте новую копию файла <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>.</p> +<p>В полях, предназначеннх для ввода чисел (например, <code><a href="/ru/docs/Web/HTML/Element/input/number"><input type="number"></a></code>), диапазон допустимых значений можно определить с помощью атрибутов <code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code> и <code><a href="/en-US/docs/Web/HTML/Attributes/max">max</a></code>. Если поле содержит значение за пределами данного диапазона, оно будет не валидным.</p> -<p>Теперь удалите содержимое элемента <code><body></code>, и замените его следующим:</p> +<p>Давайте рассмотрим другой пример. Создайте новую копию файла <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>.</p> -<pre class="brush: html notranslate"><form> +<p>Содержимое элемента <code><body></code> замените на:</p> + +<pre class="brush: html"><form> <div> <label for="choose">Would you prefer a banana or a cherry?</label> - <input id="choose" name="i_like" required minlength="6" maxlength="6"> + <input type="text" id="choose" name="i_like" required minlength="6" maxlength="6"> </div> <div> <label for="number">How many would you like?</label> @@ -262,12 +255,12 @@ input:valid { </form></pre> <ul> - <li>Здесь вы увидите, что мы задали полю <code>text</code> <code>minlength</code> <code>maxlength</code> равную 6 — такая же длина, как banana и cherry. Ввод меньшего количества символов будет отображаться как невалидный, а вводить больше в большинстве браузеров невозможно.</li> - <li>Мы также дали полю <code>number</code> <code>min</code> 1 и <code>max</code> 10 - числа введённые вне этого диапазона будут отображаться как невалидные, и вы не сможете использовать стрелки приращения / уменьшения, чтобы переместить значение за пределами этого диапазона.</li> + <li>Здесь мы в полю с типом <code>text</code> атрибутам <code>minlength</code> и <code>maxlength</code>, задали одинаковое значение 6, что соответствует количеству символов в словах banana и cherry.</li> + <li>В поле с типом <code>number</code> атрибуту <code>min</code> мы задали значение 1, а атрибуту <code>max</code> значение 10. При вводе чисел за пределами данного диапазона, поле будет становиться не валидным; с помощью стрелок увеличения/уменьшения пользователи не смогут выйти за границы диапазона. Текущее поле не является обязательным для заполнения, поэтому даже после очистки будет оставаться валидным.</li> </ul> <div class="hidden"> -<pre class="notranslate">input:invalid { +<pre class="brush: css">input:invalid { border: 2px dashed red; } @@ -280,38 +273,45 @@ div { }</pre> </div> -<p>Вот живой пример:</p> +<p>Демонстрационный пример:</p> + +<p>{{EmbedLiveSample("Constraining_the_values_of_your_entries", "100%", 100)}}</p> -<p>{{EmbedLiveSample("Constraining_the_length_of_your_entries", "100%", 70)}}</p> +<div class="notecard note"> +<p><strong>Примечание</strong>: Рабочий пример можно найти на GitHub по адресу <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-length.html">fruit-length.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-length.html">исходный код</a>.)</p> +</div> -<div class="note"> -<p><strong>Примечание</strong>: <code><input type="number"></code> (и другие типы, например <code>range</code>) могут также содержать атрибут {{htmlattrxref("step", "input")}} который указывает, какой инкремент будет увеличиваться или уменьшаться, когда используются элементы управления входом (например, номерные кнопки вверх и вниз)</p> +<div class="notecard note"> +<p><strong>Примечание</strong>: <code><input type="number"></code> (и другие типы, такие как <code>range</code> и <code>date</code>) могут также принимать атрибут <a href="/en-US/docs/Web/HTML/Attributes/step"><code>step</code></a>, который задаёт шаг увеличения или уменьшения значения при использовании кнопок вверх и вниз. В примере выше мы явно не указывали атрибут <code>step</code>, поэтому он получает значение по умолчанию, равное <code>1</code>. Это значит, что дробные числа, такие как 3.2, будут не валидными.</p> </div> -<h3 id="Полный_пример">Полный пример</h3> +<h3 id="Full_example">Полный пример</h3> -<p>Вот полный пример, чтобы показать использование встроенных функций проверки HTML:</p> +<p>Ниже представлен полный пример, демонстрирующий использование встроенного функционала валидации. Сначала немного HTML:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <p> <fieldset> - <legend>Title<abbr title="This field is mandatory">*</abbr></legend> - <input type="radio" required name="title" id="r1" value="Mr"><label for="r1">Mr.</label> - <input type="radio" required name="title" id="r2" value="Ms"><label for="r2">Ms.</label> + <legend>Do you have a driver's license?<abbr title="This field is mandatory" aria-label="required">*</abbr></legend> + <!-- Так как в группе радио-кнопок, имеющих одинаковое имя, выбранной может быть + только одна, то и атрибут "required" достаточно задать хотя бы одной кнопке, + чтобы сделать всю группу обязательной для заполнения --> + <input type="radio" required name="driver" id="r1" value="yes"><label for="r1">Yes</label> + <input type="radio" required name="driver" id="r2" value="no"><label for="r2">No</label> </fieldset> </p> <p> <label for="n1">How old are you?</label> - <!-- The pattern attribute can act as a fallback for browsers which - don't implement the number input type but support the pattern attribute. - Please note that browsers that support the pattern attribute will make it - fail silently when used with a number field. - Its usage here acts only as a fallback --> + <!-- Атрибут "pattern" может выступать фолбэком для браузеров, которые + не поддерживают поля ввода c числовым типом данных. Те браузеры, + которые такие поля поддерживают, будут просто игнорировать его. + Как раз, ниже атрибут "pattern" выполняет роль фолбека. + --> <input type="number" min="12" max="120" step="1" id="n1" name="age" pattern="\d+"> </p> <p> - <label for="t1">What's your favorite fruit?<abbr title="This field is mandatory">*</abbr></label> + <label for="t1">What's your favorite fruit?<abbr title="This field is mandatory" aria-label="required">*</abbr></label> <input type="text" id="t1" name="fruit" list="l1" required pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range"> <datalist id="l1"> @@ -324,7 +324,7 @@ div { </datalist> </p> <p> - <label for="t2">What's your e-mail?</label> + <label for="t2">What's your e-mail address?</label> <input type="email" id="t2" name="email"> </p> <p> @@ -336,39 +336,24 @@ div { </p> </form></pre> -<pre class="brush: css notranslate">body { - font: 1em sans-serif; - padding: 0; - margin : 0; -} +<p>И немного CSS для стилизации HTML:</p> -form { - max-width: 200px; - margin: 0; - padding: 0 5px; +<pre class="brush: css">form { + font: 1em sans-serif; + max-width: 320px; } p > label { display: block; } -input[type=text], -input[type=email], -input[type=number], +input[type="text"], +input[type="email"], +input[type="number"], textarea, fieldset { -/* требуется для правильной формы формы - элементов в браузерах на основе WebKit*/ - -webkit-appearance: none; - width : 100%; border: 1px solid #333; - margin: 0; - - font-family: inherit; - font-size: 90%; - - -moz-box-sizing: border-box; box-sizing: border-box; } @@ -377,211 +362,145 @@ input:invalid { } input:focus:invalid { - outline: none; + box-shadow: none; }</pre> +<p>Получим следующее:</p> + <p>{{EmbedLiveSample("Full_example", "100%", 420)}}</p> -<h3 id="Индивидуальные_сообщения_об_ошибках">Индивидуальные сообщения об ошибках</h3> +<p>В статье <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#validation-related_attributes">Атрибуты валидации</a> можно найти полный список атрибутов, которые можно использовать для ограничения допустимых значений ввода и типов полей <code>input</code>, которые их поддерживают.</p> -<p>Как видно из приведённых выше примеров, каждый раз, когда пользователь пытается отправить невалидную форму, браузер отображает сообщение об ошибке. Способ отображения этого сообщения зависит от браузера.</p> +<div class="notecard note"> +<p><strong>Примечание</strong>: Рабочий пример можно найти на GitHub по адресу <a href="https://mdn.github.io/learning-area/html/forms/form-validation/full-example.html">full-example.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/full-example.html">исходный код</a>.)</p> +</div> -<p>Эти автоматизированные сообщения имеют два недостатка:</p> +<h2 id="Validating_forms_using_JavaScript">Валидация форм с помощью JavaScript</h2> + +<p>Если нужно управлять внешним видом встроенных сообщений об ошибке или работать с устаревшими браузерами, которые не поддерживают встроенную валидацию форм HTML, вам следует использовать JavaScript. В данном разделе мы рассмотрим различные способы делать это.</p> + +<h3 id="The_Constraint_Validation_API">Constraint Validation API</h3> + +<p>Большинство браузеров поддерживают <a href="/en-US/docs/Web/API/Constraint_validation">Constraint Validation API</a>, который состоит из набора свойств и методов, доступных на DOM-интерфейсах следующих элементов форм:</p> <ul> - <li>Нет стандартного способа изменить внешний вид используя CSS.</li> - <li>Они зависят от языка браузера, что означает, что у вас может быть страница на одном языке, но сообщение об ошибке отображаться на другом языке.</li> + <li><code><a href="/ru/docs/Web/API/HTMLButtonElement">HTMLButtonElement</a></code> (представляет элемент <code><a href="/ru/docs/Web/HTML/Element/button"><button></a></code>)</li> + <li><code><a href="/en-US/docs/Web/API/HTMLFieldSetElement">HTMLFieldSetElement</a></code> (представляет элемент <code><a href="/ru/docs/Web/HTML/Element/fieldset"><fieldset></a></code>)</li> + <li><code><a href="/ru/docs/Web/API/HTMLInputElement">HTMLInputElement</a></code> (представляет элемент <code><a href="/ru/docs/Web/HTML/Element/input"><input></a></code>)</li> + <li><code><a href="/en-US/docs/Web/API/HTMLOutputElement">HTMLOutputElement</a></code> (представляет элемент <code><a href="/ru/docs/Web/HTML/Element/output"><output></a></code>)</li> + <li><code><a href="/ru/docs/Web/API/HTMLSelectElement">HTMLSelectElement</a></code> (представляет элемент <code><a href="/ru/docs/Web/HTML/Element/select"><select></a></code>)</li> + <li><code><a href="/en-US/docs/Web/API/HTMLTextAreaElement">HTMLTextAreaElement</a></code> (представляет элемент <code><a href="/en-US/docs/Web/HTML/Element/textarea"><textarea></a></code>)</li> </ul> -<table> - <caption>Французская версия сообщений обратной связи на странице на английском языке</caption> - <thead> - <tr> - <th scope="col">Браузер</th> - <th scope="col">Отображение</th> - </tr> - </thead> - <tbody> - <tr> - <td>Firefox 17 (Windows 7)</td> - <td><img alt="Example of an error message with Firefox in French on an English page" src="/files/4329/error-firefox-win7.png" style="height: 97px; width: 228px;"></td> - </tr> - <tr> - <td>Chrome 22 (Windows 7)</td> - <td><img alt="Example of an error message with Chrome in French on an English page" src="/files/4327/error-chrome-win7.png" style="height: 96px; width: 261px;"></td> - </tr> - <tr> - <td>Opera 12.10 (Mac OSX)</td> - <td><img alt="Example of an error message with Opera in French on an English page" src="/files/4331/error-opera-macos.png" style="height: 83px; width: 218px;"></td> - </tr> - </tbody> -</table> +<p id="Constraint_validation_API_properties">Для перечисленных выше элементов Constraint Validation API делает доступными следующие свойства.</p> + +<ul> + <li><code>validationMessage</code>: Возвращает локализованное сообщение, описывающее ограничения валидации (если таковые имеются), которым не удовлетворяет определённый элемент. Если элемент не участвует в валидации (<code>willValidate</code> установлено в <code>false</code>) или значение элемента удовлетворяет установленным ограничениям (является валидным), будет возвращена пустая строка.</li> + <li><code>validity</code>: Возвращает объект <code>ValidityState</code>, который содержит несколько свойств, описывающих состояние валидности элемента. Подробное описание всех свойств доступности можно найти на странице справочника {{domxref("ValidityState")}}; ниже приведён список наиболее используемых: + <ul> + <li>{{domxref("ValidityState.patternMismatch", "patternMismatch")}}: Возвращает <code>true</code>, если значение не соответствует шаблону, указанному в атрибуте {{htmlattrxref("pattern", "input")}}, и <code>false</code> если соответствует. Если true, элемент соответствует CSS-псевдоклассу {{cssxref(":invalid")}}.</li> + <li>{{domxref("ValidityState.tooLong", "tooLong")}}: Возвращает <code>true</code>, если значение длиннее максимальной длины, указанной в атрибуте {{htmlattrxref("maxlength", "input")}}, и <code>false</code> если оно короче или равно ей. Если true, элемент соответствует CSS-псевдоклассу {{cssxref(":invalid")}}.</li> + <li>{{domxref("ValidityState.tooShort", "tooShort")}}: Возвращает <code>true</code>, если значение короче минимальной длины, указанной в атрибуте {{htmlattrxref("minlength", "input")}}, и <code>false</code> если оно длинее или равно ей. Если true, элемент соответствует CSS-псевдоклассу {{cssxref(":invalid")}}.</li> + <li>{{domxref("ValidityState.rangeOverflow", "rangeOverflow")}}: Возвращает <code>true</code>, если значение больше указанного в атрибуте {{htmlattrxref("max", "input")}} максимума, и <code>false</code> если меньше или равно ему. Если true, элемент соответствует CSS-псевдоклассам {{cssxref(":invalid")}} и {{cssxref(":out-of-range")}}</li> + <li>{{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}}: Возвращает <code>true</code>, если значение меньше указанного в атрибуте {{htmlattrxref("min", "input")}}, и <code>false</code> если больше или равно ему. Если true, элемент соответствует CSS-псевдоклассу {{cssxref(":invalid")}} и {{cssxref(":out-of-range")}}.</li> + <li>{{domxref("ValidityState.typeMismatch", "typeMismatch")}}: Возвращает <code>true</code>, если значение не соответствует требуемому синтаксису (когда для {{htmlattrxref("type", "input")}} задано значение <code>email</code> или <code>url</code>), и <code>false</code> если синтаксис корректный. Если <code>true</code>, элемент соответствует CSS-псевдоклассу {{cssxref(":invalid")}}.</li> + <li><code>valid</code>: Возвращает <code>true</code>, если элемент соответствует всем ограничениям валидации — следовательно, считается валидным, и <code>false</code> если не соответствует какому-то ограничению. Если true, элемент соответствует CSS-псевдоклассу {{cssxref(":valid")}}; иначе {{cssxref(":invalid")}}.</li> + <li><code>valueMissing</code>: Возвращает <code>true</code>, если у элемента есть атрибут {{htmlattrxref("required", "input")}}, но не введено значенение, иначе возвращает <code>false</code>. Если true, элемент соответствует CSS-псевдоклассу {{cssxref(":invalid")}}.</li> + </ul> + </li> + <li><code>willValidate</code>: Возвращает <code>true</code>, если элемент будет участвовать в валидации при отправке формы; иначе возвращает <code>false</code>.</li> +</ul> + +<p id="Constraint_validation_API_methods">Также для перечисленных выше элементов Constraint Validation API делает доступными следующие методы.</p> + +<ul> + <li><code>checkValidity()</code>: Возвращает <code>true</code>, если значение элемента проходит валидацию, иначе возвращает <code>false</code>. Если элемент не валиден, данный метод также запускает на нём событие <a href="/ru/docs/Web/API/HTMLInputElement/invalid_event"><code>invalid</code></a>.</li> + <li><code>setCustomValidity(<em>message</em>)</code>: Позволяет добавить в элемент кастомное сообщение об ошибке; при этом элемент будет считаться не валидным и отобразится указанная ошибка. Это позволяет использовать JavaScript-код, чтобы представить ошибку валидации иначе, чем это предусмотрено стандартными средствами валидации HTML5. При сообщении об ошибке данное кастомное сообщение показывается пользователю.</li> +</ul> + +<h4 id="Implementing_a_customized_error_message">Реализация кастомного сообщения об ошибке</h4> -<p>Чтобы настроить внешний вид и текст этих сообщений, вы должны использовать JavaScript; нет способа сделать это, используя только HTML и CSS.</p> +<p>Как вы видели в примерах HTML5-валидации выше, каждый раз, когда пользователь пытается отправить не валидную форму, браузер отображает сообщение об ошибке. Способ отображения сообщения зависит от браузера.</p> -<p>HTML5 предоставляет <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#the-constraint-validation-api">API проверки ограничений </a>(API - Application Programing interface, программный интерфейс приложения, англ.) для проверки и настройки состояния элемента формы. Помимо прочего, можно заменить текст сообщения об ошибке. Давайте посмотрим на небольшой пример:</p> +<p>У этих автоматических сообщений есть два недостатка:</p> + +<ul> + <li>Не существует стандартного способа их стилизации с помощью CSS.</li> + <li>Они зависят от локали браузера, из-за чего страница может быть на одном языке, а сообщение об ошибке — на другом, как показано на следующем скриншоте браузера Firefox.</li> +</ul> -<pre class="brush: html notranslate"><form> - <label for="mail">I would like you to provide me an e-mail</label> +<p><img alt="Пример сообщения об ошибке на англоязычной странице в браузере Firefox с настроенным французским языком" src="error-firefox-win7.png"></p> + +<p>Настройка таких сообщений об ошибках является одной из наиболее распространённых причин использования <a href="/en-US/docs/Web/API/Constraint_validation" rel="external">Constraint Validation API</a>. Давайте рассмотрим простой пример, как это делается.</p> + +<p>Начнём с простого HTML (Не стесняйтесь поместить это в пустой HTML-файл. Вы можете взять за основу свежую копию <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>, если хотите):</p> + +<pre class="brush: html"><form> + <label for="mail">I would like you to provide me with an e-mail address:</label> <input type="email" id="mail" name="mail"> <button>Submit</button> </form></pre> -<p>В JavaScript вы вызываете метод <a href="/en-US/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"><code>setCustomValidity()</code></a>:</p> +<p>Добавьте на страницу следующий JavaScript:</p> -<pre class="brush: js notranslate">var email = document.getElementById("mail"); +<pre class="brush: js">const email = document.getElementById("mail"); email.addEventListener("input", function (event) { if (email.validity.typeMismatch) { - email.setCustomValidity("I expect an e-mail, darling!"); + email.setCustomValidity("I am expecting an e-mail address!"); } else { email.setCustomValidity(""); } });</pre> -<p>{{EmbedLiveSample("Customized_error_messages", "100%", 50)}}</p> +<p>Здесь мы сохраняем ссылку на поле email, а затем добавляем к нему слушатель события, который запускает код обработчика каждый раз, когда в поле меняется значение.</p> -<h2 id="Проверка_форм_с_использованием_JavaScript">Проверка форм с использованием JavaScript</h2> +<p>В коде обработчика мы проверяем, возвращает ли свойство поля email <code>validity.typeMismatch</code> значение <code>true</code>, что значит, что содержащееся значение не соответствует шаблону корректного email-адреса. Если возвращается <code>true</code>, мы вызываем метод {{domxref("HTMLInputElement.setCustomValidity()","setCustomValidity()")}} с кастомным сообщением. Это делает поле не валидным, поэтому попытка отправить форму приводит к ошибке и отображается кастомное сообщение об ошибке.</p> -<p>Если вы хотите контролировать внешний вид собственных сообщений об ошибках или работать с браузерами, которые не поддерживают встроенную проверку формы HTML, вы должны использовать JavaScript.</p> +<p>Если свойство <code>validity.typeMismatch</code> возвращает <code>false</code>, мы вызываем метод <code>setCustomValidity()</code> с пустой строкой. Это делает поле валидным, поэтому форма может быть успешно отправлена.</p> -<h3 id="API_проверки_валидности_HTML5">API проверки валидности HTML5</h3> +<p>Попробовать пример можно ниже:</p> -<p>Все больше браузеров теперь поддерживают API проверки ограничений, и он становится надёжным. Этот API состоит из набора методов и свойств, доступных для каждого элемента формы.</p> +<p>{{EmbedGHLiveSample("learning-area/html/forms/form-validation/custom-error-message.html", '100%', 80)}}</p> -<h4 id="Свойства_API_проверки_валидности">Свойства API проверки валидности</h4> - -<table> - <thead> - <tr> - <th scope="col">Свойство</th> - <th scope="col">Описание</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>validationMessage</code></td> - <td>Локализованное сообщение, описывающее ограничения валидности, которым элемент управления не соответствует (если есть), или пустая строка, если элемент управления не является кандидатом для проверки ограничений (<code>willValidate</code> is <code>false</code>), или значение элемента удовлетворяет его ограничениям.</td> - </tr> - <tr> - <td><code>validity</code></td> - <td>объект {{domxref("ValidityState")}} , описывающий состояние действительности элемента.</td> - </tr> - <tr> - <td><code>validity.customError</code></td> - <td>Возвращает <code>true</code> если элемент содержит пользовательскую ошибку; <code>false</code> в противном случае.</td> - </tr> - <tr> - <td><code>validity.patternMismatch</code></td> - <td>Возвращает <code>true</code> если значение элемента не соответствует предоставленному шаблону; <code>false</code> в противном случае.<br> - <br> - если возвращает <code>true</code>, элемент будет соответствовать CSS псевдоклассу {{cssxref(":invalid")}}.</td> - </tr> - <tr> - <td><code>validity.rangeOverflow</code></td> - <td>Возвращает <code>true</code> если значение элемента выше заданного максимума; <code>false</code> в противном случае.<br> - <br> - Если возвращает <code>true</code>, элемент будет соответствовать {{cssxref(":invalid")}} и CSS псевдоклассу. {{cssxref(":out-of-range")}}.</td> - </tr> - <tr> - <td><code>validity.rangeUnderflow</code></td> - <td>Возвращает<code>true</code> если значение элемента меньше заданного минимума; <code>false</code> в противном случае.<br> - <br> - Если возвращает <code>true</code>, элемент будет соответствовать {{cssxref(":invalid")}} и CSS псевдоклассу {{cssxref(":out-of-range")}}.</td> - </tr> - <tr> - <td><code>validity.stepMismatch</code></td> - <td>Возвращает<code>true,</code> если значение элемента не соответствует правилам, предоставляемым атрибутом step; в противном случае <code>false</code> .<br> - <br> - <code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Если возвращает </span></font>true</code>, элемент будет соответствовать {{cssxref(":invalid")}} и CSS псевдоклассу {{cssxref(":out-of-range")}}.</td> - </tr> - <tr> - <td><code>validity.tooLong</code></td> - <td>Возвращает <code>true</code> если значение элемента больше заданной максимальной длины; иначе будет false<br> - <br> - Если возвращает <code>true</code>, элемент будет соответствовать {{cssxref(":invalid")}} и CSS псевдоклассу {{cssxref(":out-of-range")}}.</td> - </tr> - <tr> - <td><code>validity.typeMismatch</code></td> - <td>Возвращает true если значение элемента не соответствует правильному синтаксису; в противном случае - false.<br> - Если возвращает <code>true</code>, элемент будет соответствовать CSS псевдоклассу {{cssxref(":invalid")}}.</td> - </tr> - <tr> - <td><code>validity.valid</code></td> - <td>Возвращает <code>true</code> если значение элемента не имеет проблем с валидностью; в противном случае <code>false</code>.<br> - <br> - Если возвращает <code>true</code>, элемент будет соответствовать CSS псевдоклассу {{cssxref(":valid")}} ; CSS псевдоклассу {{cssxref(":invalid")}} в противном случае.</td> - </tr> - <tr> - <td><code>validity.valueMissing</code></td> - <td>Возвращает true если элемент не имеет значения, но является обязательным полем; в противном случае false.<br> - <br> - Если возвращает <code>true</code>, элемент будет соответствовать CSS псевдоклассу {{cssxref(":invalid")}}.</td> - </tr> - <tr> - <td><code>willValidate</code></td> - <td>Возвращает <code>true</code> если элемент будет проверен при отправке формы; в противном случае <code>false</code>.</td> - </tr> - </tbody> -</table> - -<h4 id="Методы_API_проверки_ограничений">Методы API проверки ограничений</h4> - -<table> - <thead> - <tr> - <th scope="col">Метод</th> - <th scope="col">Описание</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>checkValidity()</code></td> - <td>Возвращает <code>true</code> если значение элемента не имеет проблем с валидностью; иначе <code>false</code>. Если элемент невалидный, этот метод также вызывает событие {{event("invalid")}} в элементе .</td> - </tr> - <tr> - <td><code>setCustomValidity(<em>message</em>)</code></td> - <td>Добавляет настраиваемое сообщение об ошибке в элемент; если вы установили собственное сообщение об ошибке, элемент считается невалидным, и отображается указанная ошибка. Это позволяет использовать код JavaScript для установления ошибки валидации, отличного от тех, которые предлагаются стандартным API ограничений валидности. Сообщение показывается пользователю при возникновении проблемы.<br> - <br> - Если аргументом является пустая строка, пользовательская ошибка очищается.</td> - </tr> - </tbody> -</table> +<div class="notecard note"> +<p><strong>Примечание:</strong>: Данный пример можно найти на GitHub по адресу <a href="https://mdn.github.io/learning-area/html/forms/form-validation/custom-error-message.html">custom-error-message.html</a> (отдельно можно найти <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/custom-error-message.html">исходный код</a>.)</p> +</div> -<p>Для устаревших браузеров можно использовать полифил как <a href="https://hyperform.js.org/" rel="external">Hyperform </a> чтобы компенсировать отсутствие поддержки API ограничений валидности. Поскольку вы уже используете JavaScript, использование полифила не является дополнительным бременем для вашего веб-сайта или дизайна или реализации веб-приложения.</p> +<h4 id="A_more_detailed_example">Более подробный пример</h4> -<h4 id="Пример_использования_API_проверки_ограничений">Пример использования API проверки ограничений</h4> +<p>Теперь, когда мы разобрали простой пример, давайте посмотрим, как можно использовать данный API для создания более сложной валидацию.</p> -<p>Давайте посмотрим, как использовать этот API для создания настраиваемых сообщений об ошибках. Сначала HTML:</p> +<p>Во-первых, HTML. Опять же, не стесняйтесь писать его вместе с нами:</p> -<pre class="brush: html notranslate"><form novalidate> - <p> - <label for="mail"> - <span>Please enter an email address:</span> - <input type="email" id="mail" name="mail"> - <span class="error" aria-live="polite"></span> - </label> - </p> - <button>Submit</button> +<pre class="brush: html"><form novalidate> + <p> + <label for="mail"> + <span>Please enter an email address:</span> + <input type="email" id="mail" name="mail" required minlength="8"> + <span class="error" aria-live="polite"></span> + </label> + </p> + <button>Submit</button> </form></pre> -<p>Эта простая форма использует атрибут {{htmlattrxref("novalidate","form")}} для отключения автоматической валидации браузера, что позволяет нашему скрипту контролировать валидацию. Однако это не отключает поддержку API ограничений валидации или применения псевдоклассов CSS {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}} и {{cssxref(":out-of-range")}}. Это означает, что, хотя браузер не проверяет правильность формы перед отправкой своих данных, вы всё равно можете сделать это самостоятельно и соответствующим образом сформировать форму.</p> +<p>Эта простая форма использует атрибут <code><a href="/en-US/docs/Web/HTML/Attributes/novalidate">novalidate</a></code>, который отключает автоматическую валидацию браузером; это позволяет нашему скрипту взять управление валидацией на себя. Однако, это не отменяет поддержку Constraint Validation API или псевдоклассов, таких как {{cssxref(":valid")}} или ему подобных. Это значит, что хотя браузер автоматически и не проверяет валидность формы перед отправкой данных, вы можете сделать это самостоятельно и соответствующим образом стилизовать форму.</p> -<p>Атрибут <a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code></a> гарантирует, что наше индивидуальное сообщение об ошибке будет доступно всем, включая тех, кто использует вспомогательные технологии, такие как скрин-ридеры.</p> +<p>Объектом валидации является обязательный для заполнения <code><a href="/en-US/docs/Web/HTML/Element/input/email"><input type="email"></a></code>, длина которого не должна быть меньше 8 символов. Давайте напишем код, проверяющий эти критерии, и покажем кастомное сообщение об ошибке в случае несоблюдения какого-то из них.</p> -<h5 id="CSS">CSS</h5> +<p>Мы хотим показывать сообщение об ошибке внутри элемента <code><span></code>. Данному элементу задан атрибут <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code></a>, чтобы гарантировать, что наше кастомное сообщение об ошибке будет доступно всем, включая пользователей скринридеров.</p> -<p>Этот CSS задаёт стили нашей форме и выводу ошибки, чтобы сделать их визуально более привлекательными.</p> +<div class="notecard note"> +<p><strong>Примечание</strong>: Ключевым моментом здесь является то, что добавление к форме атрибута <code>novalidate</code> отключает отображение встроенных сообщений об ошибке и позволяет вместо этого добавлять в DOM кастомные сообщения.</p> +</div> + +<p>Перейдём к базовому CSS, чтобы немного улучшить внешний вид формы и обеспечить визуальную обратную связь при введении не валидных данных:</p> -<pre class="brush: css notranslate">/* Это просто, чтобы сделать пример более приятным */ -body { +<pre class="brush: css">body { font: 1em sans-serif; + width: 200px; padding: 0; - margin : 0; -} - -form { - max-width: 200px; + margin : 0 auto; } p * { @@ -590,6 +509,7 @@ p * { input[type=email]{ -webkit-appearance: none; + appearance: none; width: 100%; border: 1px solid #333; @@ -598,11 +518,10 @@ input[type=email]{ font-family: inherit; font-size: 90%; - -moz-box-sizing: border-box; box-sizing: border-box; } -/* Наш стиль для невалидных полей */ +/* Это стили для не валидных полей */ input:invalid{ border-color: #900; background-color: #FDD; @@ -612,7 +531,7 @@ input:focus:invalid { outline: none; } -/* Это стиль для сообщений об ошибке */ +/* Это стили для кастомных сообщений об ошибке */ .error { width : 100%; padding: 0; @@ -622,7 +541,6 @@ input:focus:invalid { background-color: #900; border-radius: 0 0 5px 5px; - -moz-box-sizing: border-box; box-sizing: border-box; } @@ -630,96 +548,131 @@ input:focus:invalid { padding: 0.3em; }</pre> -<h5 id="JavaScript">JavaScript</h5> +<p>Теперь давайте рассмотрим JavaScript, который реализует кастомную валидацию.</p> -<p>Следующий код JavaScript обрабатывает выборочную проверку ошибок.</p> +<pre class="brush: js"> +// Существуют разные способы получить DOM-узел; здесь мы определяем саму форму и +// поле ввода email и элемент span, в который поместим сообщение об ошибке +const form = document.getElementsByTagName('form')[0]; -<pre class="brush: js notranslate">//Существует много способов выбрать DOM узел; здесь мы получаем форму и электронную почту -//поле ввода, а также элемент span, в который мы поместим сообщение об ошибке. -var form = document.getElementsByTagName('form')[0]; -var email = document.getElementById('mail'); -var error = document.querySelector('.error'); +const email = document.getElementById('mail'); +const emailError = document.querySelector('#mail + span.error'); + +email.addEventListener('input', function (event) { + // Каждый раз, когда пользователь что-то вводит, + // мы проверяем, являются ли поля формы валидными -email.addEventListener("input", function (event) { - // Каждый раз, когда пользователь вводит что-либо, мы проверяем, - // является ли корректным поле электронной почты. if (email.validity.valid) { - // В случае появления сообщения об ошибке, если поле - // является корректным, мы удаляем сообщение об ошибке. - error.innerHTML = ""; // Сбросить содержимое сообщения - error.className = "error"; // Сбросить визуальное состояние сообщения + // Если на момент валидации какое-то сообщение об ошибке уже отображается, + // если поле валидно, удаляем сообщение + emailError.textContent = ''; // Сбросить содержимое сообщения + emailError.className = 'error'; // Сбросить визуальное состояние сообщения + } else { + // Если поле не валидно, показываем правильную ошибку + showError(); } -}, false); -form.addEventListener("submit", function (event) { - // Каждый раз, когда пользователь пытается отправить данные, мы проверяем - // валидность поля электронной почты. - if (!email.validity.valid) { - - // Если поле невалидно, отображается пользовательское - // сообщение об ошибке. - error.innerHTML = "I expect an e-mail, darling!"; - error.className = "error active"; - // И мы предотвращаем отправку формы путём отмены события +}); + +form.addEventListener('submit', function (event) { + // Если поле email валдно, позволяем форме отправляться + + if(!email.validity.valid) { + // Если поле email не валидно, отображаем соответствующее сообщение об ошибке + showError(); + // Затем предотвращаем стандартное событие отправки формы event.preventDefault(); } -}, false);</pre> +}); -<p>Вот живой результат:</p> +function showError() { + if(email.validity.valueMissing) { + // Если поле пустое, + // отображаем следующее сообщение об ошибке + emailError.textContent = 'You need to enter an e-mail address.'; + } else if(email.validity.typeMismatch) { + // Если поле содержит не email-адрес, + // отображаем следующее сообщение об ошибке + emailError.textContent = 'Entered value needs to be an e-mail address.'; + } else if(email.validity.tooShort) { + // Если содержимое слишком короткое, + // отображаем следующее сообщение об ошибке + emailError.textContent = `Email should be at least ${ email.minLength } characters; you entered ${ email.value.length }.`; + } -<p>{{EmbedLiveSample("Example_using_the_constraint_validation_API", "100%", 130)}}</p> + // Задаём соответствующую стилизацию + emailError.className = 'error active'; +}</pre> -<p>API ограничений валидации даёт вам мощный инструмент для проверки формы, позволяя вам получить контроль над пользовательским интерфейсом больше и лучше того, что вы можете делать только при помощи HTML и CSS.</p> +<p>Комментарии объясняют логику хорошо, но кратко:</p> -<h3 id="Проверка_форм_без_встроенного_API">Проверка форм без встроенного API</h3> +<ul> + <li>При каждом изменении значения поля, мы производим его валидацию. Если данные валидны, удаляем ранее отображаемые сообщения об ошибках. Если данные не валдны, запускаем <code>showError()</code>, чтобы показать соответствующую ошибку.</li> + <li>При каждой попытке отправить форму, мы снова производим валидацию. Если данные валидны, позволяем отправку формы. Если данные не валидны, запускам <code>showError()</code>, чтобы показать соответствующее сообщение об ошибке, а также предотвращаем отправку формы с помощью <code><a href="/ru/docs/Web/API/Event/preventDefault">preventDefault()</a></code>.</li> + <li>Функция <code>showError()</code> использует различные свойства объекта <code>validity</code> поля ввода, чтобы определить тип ошибки и отобразить соответсвущее сообщение.</li> +</ul> -<p>Иногда, например, с устаревшими браузерами или <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">пользовательскими виджетами</a>, вы не сможете (или не захотите) использовать API проверки ограничений. В этом случае вы все ещё можете использовать JavaScript для проверки вашей формы. Проверка формы - это скорее вопрос пользовательского интерфейса, чем проверка валидности данных.</p> +<p>Рабочий пример:</p> -<p>Чтобы проверить форму, вы должны задать себе несколько вопросов:</p> +<p>{{EmbedGHLiveSample("learning-area/html/forms/form-validation/detailed-custom-validation.html", '100%', 150)}}</p> + +<div class="notecard note"> +<p><strong>Примечание</strong>: Рабочий пример можно найти на GitHub по адресу <a href="https://mdn.github.io/learning-area/html/forms/form-validation/detailed-custom-validation.html">detailed-custom-validation.html</a> (отдельно можно найти <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/detailed-custom-validation.html">исходный код</a>.)</p> +</div> + +<p>Constraint Validation API явяется мощным инструментом валидации форм, позволяющим получить контроль над пользовательским интерфейсом, существенно превосходящий возможности HTML и CSS.</p> + +<div class="notecard note"> +<p><strong>Примечание</strong>: Для получения дополнительной информации смотрите руководства <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Constraint validation guide</a> и <a href="/en-US/docs/Web/API/Constraint_validation">Constraint Validation API</a>.</p> +</div> + +<h3 id="Validating_forms_without_a_built-in_API">Проверка форм без встроенного API</h3> + +<p>В некоторых случаях, например, при необходимости поддержки устаревших браузеров или <a href="/ru/docs/Learn/Forms/How_to_build_custom_form_controls">кастомных элементов формы</a>, вы не сможете или не захотите использовать Constraint Validation API. Вы по-прежнему сможете использовать JavaScript для валидации форм, но для этого всё нужно будет писать самостоятельно.</p> + +<p>Для создания своего валидатора формы, задайте себе несколько вопросов:</p> <dl> - <dt>Какую проверку я должен выполнить?</dt> - <dd>Вам нужно определить, как проверить ваши данные: операции со строками, преобразование типов, регулярные выражения и т. д. Это зависит от вас. Просто помните, что данные формы всегда являются текстовыми и всегда предоставляются вашему скрипту как строки.</dd> - <dt>Что делать, если форма не проверяется?</dt> - <dd>Это явно вопрос интерфейса. Вы должны решить, как будет выглядеть форма: формально ли отправляет данные? Должны ли вы выделять поля, которые содержат ошибки? Должны отображаться сообщения об ошибках?</dd> - <dt>Как я могу помочь пользователю исправить невалидные данные?</dt> - <dd>Чтобы уменьшить разочарование пользователя, очень важно предоставить как можно больше полезной информации, чтобы помочь им в исправлении их исходных данных. Вы должны предлагать предварительные предложения, чтобы они знали, что ожидается, а также ясные сообщения об ошибках. Если вы хотите вникнуть в требования к пользовательскому интерфейсу проверки формы, есть некоторые полезные статьи, которые вы должны прочитать: + <dt>Какую тип валидации я должен выполнить?</dt> + <dd>Вам нужно определить, как данные будут валидироваться: с помощью строковых операций, преобразования типов, регулярных выражений и так далее. Решать вам.</dd> + <dt>Что мне нужно делать, если форма не проходит валидацию?</dt> + <dd>Это явно вопрос пользовательского интерфейса. Вы должны решить, как в этом случае будет себя вести форма. Будет ли она в любом случае отправлять данные? Нужно ли выделять поля, содержащие ошибки? Нужно ли отображать сообщения об ошибках?</dd> + <dt>Как я могу помочь пользователю исправить не валидные данные?</dt> + <dd>Чтобы снизить степень разочарования пользователя, очень важно предоставить как можно больше полезной информации, чтобы помочь исправить данные, которые он ввёл неправильно. Нужно предложить правильные варианты, чтобы дать понять, какие данные вы ожидаете от него получить, а также сообщение, чётко описывающее ошибку. Если вы хотите подробнее ознакомиться с требованиями к пользовательскому интрефейсу при валидации форм, предлагаем прочитать следующие статьи: <ul> - <li>SmashingMagazine: <a href="http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/" rel="external">Подтверждение формы поля: подход, основанный на ошибках</a></li> - <li>SmashingMagazine: <a href="http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/" rel="external">Проверка веб-формы: лучшие практики и учебные пособия</a></li> - <li>Six Revision: <a href="http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/" rel="external">Рекомендации по подсказкам и валидации в веб-формах</a></li> - <li>A List Apart: <a href="http://www.alistapart.com/articles/inline-validation-in-web-forms/" rel="external">Встроенная проверка в веб-формах</a></li> + <li>SmashingMagazine: <a href="https://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/" rel="external">Form-Field Validation: The Errors-Only Approach</a></li> + <li>SmashingMagazine: <a href="https://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/" rel="external">Web Form Validation: Best Practices and Tutorials</a></li> + <li>WebFX: <a href="https://www.webfx.com/blog/web-design/10-tips-for-optimizing-web-form-submission-usability/" rel="external">10 Tips for Optimizing Web Form Submission Usability</a></li> + <li>A List Apart: <a href="https://www.alistapart.com/articles/inline-validation-in-web-forms/" rel="external">Inline Validation in Web Forms</a></li> </ul> </dd> </dl> -<h4 id="Пример_который_не_использует_API_валидации_ограничений">Пример, который не использует API валидации ограничений</h4> +<h4 id="An_example_that_doesnt_use_the_constraint_validation_API">Пример без использования Constraint Validation API</h4> -<p>Чтобы проиллюстрировать это, давайте перестроим предыдущий пример, чтобы он работал с устаревшими браузерами:</p> +<p>Чтобы проиллюстрировать это дальше приводится упрощённая версия предыдущего примера, которая работает с устаревшими браузерами.</p> -<pre class="brush: html notranslate"><form> +<p>HTML почти тот такой же; мы только удалили функционал валидации HTML5.</p> + +<pre class="brush: html"><form> <p> <label for="mail"> <span>Please enter an email address:</span> - <input type="text" class="mail" id="mail" name="mail"> + <input type="text" id="mail" name="mail"> <span class="error" aria-live="polite"></span> </label> - <p> - <!-- Some legacy browsers need to have the `type` attribute - explicitly set to `submit` on the `button`element --> + </p> + <!-- Для некоторых устаревших браузеров элементу `button` нужно добавлять + атрибут `type` с явно заданным значением `submit` --> <button type="submit">Submit</button> </form></pre> -<p>Как вы можете видеть, HTML почти такой же; мы просто удалили функции проверки HTML. Обратите внимание, что <a href="/en-US/docs/Accessibility/ARIA">ARIA</a> является независимой спецификацией, которая специально не связана с HTML5.</p> +<p>CSS также не требует особых изменений; мы только заменили CSS-псевдокласс {{cssxref(":invalid")}} на реальный класс и не использовали селектор по атрибутам, так как он не работает в Internet Explorer 6.</p> -<h5 id="CSS_2">CSS</h5> - -<p>Аналогично, CSS не нужно сильно менять; мы просто переводим CSS-псевдокласс {{cssxref(":invalid")}} в настоящий класс и избегаем использования селектора атрибутов, который не работает в Internet Explorer 6.</p> - -<pre class="brush: css notranslate">/* This is just to make the example nicer */ -body { +<pre class="brush: css">body { font: 1em sans-serif; + width: 200px; padding: 0; - margin : 0; + margin : 0 auto; } form { @@ -740,11 +693,10 @@ input.mail { font-family: inherit; font-size: 90%; - -moz-box-sizing: border-box; box-sizing: border-box; } -/* This is our style for the invalid fields */ +/* Стилизация не валидных полей */ input.invalid{ border-color: #900; background-color: #FDD; @@ -754,7 +706,7 @@ input:focus.invalid { outline: none; } -/* This is the style of our error messages */ +/* Стилизация сообщений об ошибках */ .error { width : 100%; padding: 0; @@ -763,8 +715,6 @@ input:focus.invalid { color: white; background-color: #900; border-radius: 0 0 5px 5px; - - -moz-box-sizing: border-box; box-sizing: border-box; } @@ -772,32 +722,31 @@ input:focus.invalid { padding: 0.3em; }</pre> -<h5 id="JavaScript_2">JavaScript</h5> +<p>Существенно изменился только JavaScript-код, который теперь должен выполнять гораздо больше работы.</p> -<p>Большие изменения в коде JavaScript, которые должны сделать намного больше тяжёлой работы.</p> +<pre class="brush: js"> +// Устаревшие браузеры поддерживают несколько способов получения DOM-узла +const form = document.getElementsByTagName('form')[0]; +const email = document.getElementById('mail'); -<pre class="brush: js notranslate">// Существует меньше способов выбрать узел DOM с устаревшими браузерами -var form = document.getElementsByTagName('form')[0]; -var email = document.getElementById('mail'); - -// Ниже приведён трюк для достижения следующего узла Element Element в DOM -// Это опасно, потому что вы можете легко построить бесконечный цикл. -// В современных браузерах вам следует использовать элемент element.nextElementSibling -var error = email; +// Ниже приведён способ получения узла следующего родственного DOM-элемента +// Он опасен, потому что можно создать бесконечный цикл. +// В современных браузерах лучше использовать `element.nextElementSibling` +let error = email; while ((error = error.nextSibling).nodeType != 1); -// As per the HTML5 Specification -var emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; +// Согласно спецификации HTML5 +const emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; -// Многие устаревшие браузеры не поддерживают метод addEventListener. -// Вот простой способ справиться с этим; это далеко не единственный. +// Многие устаревшие браузеры не поддерживают метод `addEventListener` +// Есть простой способ заменить его; и далеко не единственный function addEvent(element, event, callback) { - var previousEventCallBack = element["on"+event]; + let previousEventCallBack = element["on"+event]; element["on"+event] = function (e) { - var output = callback(e); + const output = callback(e); - // колбэк, который возвращает `false`, останавливает цепочку колбэков - // и прерывает выполнение колбэка события. + // Колбэк, который возвращает `false`, останавливает цепочку колбэков + // и прерывает выполнение колбэка события if (output === false) return false; if (typeof previousEventCallBack === 'function') { @@ -807,101 +756,90 @@ function addEvent(element, event, callback) { } }; -// Теперь мы можем перестроить наше ограничение валидации -// Поскольку мы не полагаемся на псевдокласс CSS, мы должны -// явно установить допустимый / недопустимый класс в поле электронной почты +// Теперь мы можем изменить наши критерии валидации +// Поскольку мы не полагаемся на CSS-псевдокласс, для поля email +// нужно явно задать валидный / не валидный класс addEvent(window, "load", function () { -// Здесь мы проверяем, пусто ли поле (помните, что поле не требуется) - // Если это не так, мы проверяем, является ли его контент корректным адресом электронной почты. - var test = email.value.length === 0 || emailRegExp.test(email.value); + // Проверка, является ли поле пустым (помните, оно не являтеся обязательным) + // Если поле не пустое, проверяем содержимое на соответствует шаблону email + const test = email.value.length === 0 || emailRegExp.test(email.value); email.className = test ? "valid" : "invalid"; }); -// Это определяет, что происходит, когда пользователь вводит в поле +// Здесь определяется поведение при вводе пользователем значения поля addEvent(email, "input", function () { - var test = email.value.length === 0 || emailRegExp.test(email.value); + const test = email.value.length === 0 || emailRegExp.test(email.value); if (test) { email.className = "valid"; - error.innerHTML = ""; + error.textContent = ""; error.className = "error"; } else { email.className = "invalid"; } }); -// Это определяет, что происходит, когда пользователь пытается отправить данные +// Здесь определяется поведение при попытке отправить данные addEvent(form, "submit", function () { - var test = email.value.length === 0 || emailRegExp.test(email.value); + const test = email.value.length === 0 || emailRegExp.test(email.value); if (!test) { email.className = "invalid"; - error.innerHTML = "I expect an e-mail, darling!"; + error.textContent = "I expect an e-mail, darling!"; error.className = "error active"; - // Некоторые устаревшие браузеры не поддерживают метод event.preventDefault () + // Некоторые устаревшие браузеры не поддерживают метод event.preventDefault() return false; } else { email.className = "valid"; - error.innerHTML = ""; + error.textContent = ""; error.className = "error"; } });</pre> <p>Результат выглядит следующим образом:</p> -<p>{{EmbedLiveSample("Example_that_doesn't_use_the_constraint_validation_API", "100%", 130)}}</p> +<p>{{EmbedLiveSample("An_example_that_doesnt_use_the_constraint_validation_API", "100%", 130)}}</p> -<p>Как вы можете видеть, создать собственную систему проверки не сложно. Трудная часть состоит в том, чтобы сделать его достаточно общим, чтобы использовать его как в кросс-платформенной, так и в любой форме, которую вы могли бы создать. Существует множество библиотек для проверки формы; вы не должны колебаться, чтобы использовать их. Вот несколько примеров:</p> +<p>Как вы можете видеть, сделать собственную валидацию не так уж и сложно. Сложность состоит лишь в том, чтобы сделать его кроссплатформенным и работающим с любой формой, которую можно создать. Для проверки формы доступно множество библиотек, например <a href="https://rickharrison.github.io/validate.js/" rel="external">Validate.js</a>.</p> -<ul> - <li>Автономная библиотека - <ul> - <li><a href="http://rickharrison.github.com/validate.js/" rel="external">Validate.js</a></li> - </ul> - </li> - <li>jQuery plug-in: - <ul> - <li><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" rel="external">Validation</a></li> - </ul> - </li> -</ul> +<h2 id="Test_your_skills!">Проверьте свои навыки!</h2> -<h4 id="Удалённая_проверка">Удалённая проверка</h4> +<p>Вы дошли до конца этой статьи, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы сохранили эту информацию, прежде чем двигаться дальше — <a href="/en-US/docs/Learn/Forms/Test_your_skills:_Form_validation">Test your skills: Form validation</a>.</p> -<p>В некоторых случаях может быть полезно выполнить некоторую удалённую проверку. Такая проверка необходима, когда данные, введённые пользователем, привязаны к дополнительным данным, хранящимся на стороне сервера вашего приложения. Одним из вариантов использования является регистрационные формы, в которых вы запрашиваете имя пользователя. Чтобы избежать дублирования, разумнее выполнить AJAX запрос для проверки доступности имени пользователя, а не попросить пользователя отправить данные, а затем отправить форму с ошибкой.</p> +<h2 id="Summary">Заключение</h2> -<p>Выполнение такой проверки требует принятия нескольких мер предосторожности:</p> +<p>Для проверки формы на стороне клиента иногда требуется JavaScript, если вы хотите настроить стилизацию и сообщения об ошибках, но это всегда требует от вас внимательного отношения к пользователю. Всегда помните о необходимости помогать пользователям исправлять данные, которые они вводят. Для этого обязательно нужно:</p> <ul> - <li>Для этого требуется публиковать API и некоторые данные; убедитесь, что это не конфиденциальные данные.</li> - <li>Сетевое отставание требует выполнения асинхронной проверки. Это требует некоторой работы пользовательского интерфейса, чтобы быть уверенным, что пользователь не будет заблокирован, если проверка не будет выполнена должным образом.</li> + <li>Отображать явные сообщения об ошибках.</li> + <li>Снисходительно относиться к формату ввода.</li> + <li>Указывать, где именно возникла ошибка. Особенно в больших формах.</li> </ul> -<h2 id="Заключение">Заключение</h2> +<p>После того, как вы убедились, что форма заполнена правильно, ее можно отправлять. Дальше мы рассмотрим <a href="/ru/docs/Learn/Forms/Sending_and_retrieving_form_data">отправку данных формы</a>.</p> + +<p>{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</p> -<p>Проверка формы не требует сложного JavaScript, но она требует тщательного изучения пользователя. Всегда помните, чтобы помочь вашему пользователю исправить данные, которые они предоставляют. Для этого обязательно выполните следующие действия:</p> +<h2 id="In_this_module">In this module</h2> <ul> - <li>Отображать явные сообщения об ошибках.</li> - <li>Будьте правдоподобны в отношении формата ввода.</li> - <li>Укажите, где именно происходит ошибка (особенно на больших формах).</li> + <li><a href="/ru/docs/Learn/Forms/Your_first_form">Ваша первая форма</a></li> + <li><a href="/ru/docs/Learn/Forms/How_to_structure_a_web_form">Как структурировать веб-формы</a></li> + <li><a href="/ru/docs/Learn/Forms/Basic_native_form_controls">Основные встроенные элементы формы</a></li> + <li><a href="/en-US/docs/Learn/Forms/HTML5_input_types">Типы полей ввода в HTML5</a></li> + <li><a href="/en-US/docs/Learn/Forms/Other_form_controls">Другие элементы формы</a></li> + <li><a href="/ru/docs/Learn/Forms/Styling_web_forms">Стилизация веб-форм</a></li> + <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Продвинутая стилизация форм</a></li> + <li><a href="/en-US/docs/Learn/Forms/UI_pseudo-classes">UI псевдоклассы</a></li> + <li><a href="/ru/docs/Learn/Forms/Form_validation">Валидация форм на стороне клиента</a></li> + <li><a href="/ru/docs/Learn/Forms/Sending_and_retrieving_form_data">Отправка данных формы</a></li> </ul> -<p>{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}</p> - -<h2 id="В_этом_модуле">В этом модуле</h2> +<h3 id="Advanced_Topics">Продвинутые темы</h3> <ul> - <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Ваша первая HTML-форма</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Как структурировать форму HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Нативная форма виджетов</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Отправка данных формы</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Проверка данных формы</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Как создать пользовательские виджеты формы</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Отправка форм через JavaScript</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML-формы в старых браузерах</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Стилизация HTML-форм</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Расширенный стиль для HTML-форм</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Таблица совместимости свойств виджета формы</a></li> + <li><a href="/ru/docs/Learn/Forms/How_to_build_custom_form_controls">Как создавать кастомные элементы формы</a></li> + <li><a href="/ru/docs/Learn/Forms/Sending_forms_through_JavaScript">Отправка форм с помощью JavaScript</a></li> + <li><a href="/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls">Таблица совместимости CSS-свойств для элементов формы</a></li> </ul> |