Простая валидация для формы jquery. Валидация или проверка полей формы на ошибки и заполнение

Сохраните эту страницу для тестирования приведенных ниже примеров.

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

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

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

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

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

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

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

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

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

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

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

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

Настройка параметров проверки

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

... ...

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

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

$(function() { $("form").validate({ highlight: function(element, errorClass) { $(element).add($(element).parent()).addClass("invalidElem"); }, unhighlight: function(element, errorClass) { $(element).add($(element).parent()).removeClass("invalidElem"); }, errorElement: "div", errorClass: "errorMsg" }); });

Здесь задаются значения четырех параметров (highlight, unhighlight, errorElement и errorClass), назначение которых мы обсудим позднее.

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

В примере, представленном в примере ниже, создается одно правило:

$(function() { $("form").validate({ highlight: function(element, errorClass) { $(element).add($(element).parent()).addClass("invalidElem"); }, unhighlight: function(element, errorClass) { $(element).add($(element).parent()).removeClass("invalidElem"); }, errorElement: "div", errorClass: "errorMsg" }); $.validator.addClassRules({ flowerValidation: { min: 0 } }) });

В данном случае создается правило, которое будет применяться ко всем элементам, принадлежащим классу flowerValidation. Правило состоит в том, что значение должно быть больше или равно 0. Данное условие выражено в правиле путем указания контрольной проверки min. Это лишь один из многих удобных предопределенных видов контрольной проверки, предоставляемых модулем Validation, и все они будут описаны далее.

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

$(function() { ... $("input").addClass("flowerValidation").change(function(e) { $("form").validate().element($(e.target)); }); });

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

Также необходимо добавить CSS-правила в разметку документа, для классов, идентифицирующих ошибки:

Div.errorMsg {color: red} .invalidElem {border: medium solid red}

Результат работы подключаемого модуля Validation представлен на рисунке:

Для получения рисунка я ввел -1 в поле ввода и щелкнул на кнопке "Заказать". Текст сообщения, выводимого для пользователя, генерируется модулем проверки. О возможности изменения текста сообщений говорится далее.

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

Использование встроенных проверок

Подключаемый модуль Validation поддерживает большое количество встроенных проверок данных, введенных в полях формы. С одним из них (min) вы уже познакомились в предыдущем примере. Полный список встроенных проверок представлен в таблице ниже:

Встроенные проверки, предусмотренные в модуле Validation Проверка Описание

creditcard: true	Значение должно содержать номер кредитной карты
date: true	Значение должно быть действительной датой JavaScript
digits: true	Значение должно содержать лишь цифры
email: true	Значение должно быть действительным адресом электронной почты
max: maxVal	Значение не должно превышать maxVal
maxlength: length	Значение должно содержать не более length символов
min: minVal	Значение не должно быть меньше minVal
minlength: length	Значение должно содержать не менее length символов
number: true	Значение должно быть десятичным числом
range:	Значение должно находиться в пределах указанного диапазона
rangelength:	Значение должно содержать не менее minLen и не более maxLen символов
required: true	Значение обязательно должно быть указано
url: true	Значение должно быть URL-адресом

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

Применение правил проверки на основании принадлежности классам

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

$(function() { $("form").validate({ highlight: function(element, errorClass) { $(element).add($(element).parent()).addClass("invalidElem"); }, unhighlight: function(element, errorClass) { $(element).add($(element).parent()).removeClass("invalidElem"); }, errorElement: "div", errorClass: "errorMsg" }); $.validator.addClassRules({ flowerValidation: { required: true, digits: true, min: 0, max: 100 } }) $("input").addClass("flowerValidation").change(function(e) { $("form").validate().element($(e.target)); }); });

В этом примере проверки required, digits, min и max объединены в одно правило, позволяющее убедиться в том, что предоставленное пользователем значение является обязательным для ввода, включает только цифры и находится в интервале от 0 до 100.

Обратите внимание на то, что для связывания правила с классом используется метод addClassRules() . Аргументами этого метода являются один или несколько наборов проверок и имя класса, к которому они применяются. Как видно из примера, метод addClassRules() вызывается для свойства validator основной функции jQuery $().

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

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

Применение правил проверки непосредственно к элементам

Следующая методика позволяет применять правила к определенным элементам, как показано в примере ниже:

... $.validator.addClassRules({ flowerValidation: { required: true, digits: true, min: 0, max: 100 } }) $("#row1 input").each(function(index, elem) { $(elem).rules("add", { min: 10, max: 20 }) }); ...

Обратите внимание: мы вызываем метод, определяющий правила, для объекта jQuery и передаем ему строку add и объект отображения данных с видами проверок, которые хотим выполнить, и их аргументами. Метод rules() воздействует лишь на первый элемент выбранного набора, и поэтому для расширения сферы его действия мы должны использовать метод each(). В данном случае выбираются все элементы input, являющиеся потомками элемента row1, к которым и применяются указанные проверки.

При вызове метода rules() можно добавлять и удалять отдельные проверки, используя соответственно методы add() и remove().

Правила, применяемые к элементам с использованием методов rules(), интерпретируются до того, как будут интерпретироваться правила, применяемые с использованием классов. В контексте нашего примера это означает, что элементы верхнего ряда будут проверяться с использованием значения min, равного 10, и значения max, равного 20, в то время как к другим элементам input будут применяться соответственно значения 0 и 100. Результат представлен на рисунке:

Изменение диагностических сообщений проверки

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

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

Когда правила применяются к отдельным элементам, можно передавать им объект messages , содержащий требуемые тексты диагностических сообщений. Соответствующий пример приведен ниже:

... $.validator.addClassRules({ flowerValidation: { required: true, digits: true, min: 0, max: 100 } }) $("#row1 input").each(function(index, elem) { $(elem).rules("add", { min: 10, max: 20, messages: { max: "Вы заказали больше 20 цветов", min: "Вы заказали меньше 10 цветов" } }) }); ...

ASP ,

JavaScript

Есть множество статей о том, как написать свои правила для плагина jQuery validate, но мало какие из них объясняют внутреннюю работу этого плагина, что мы и обсудим в этой статье.
Это первая часть серии статей «Понимание ненавязчивой валидации Asp.NET MVC»

1. Работа плагина jQuery validate изнутри

Что мы узнаем из этой статьи:
1. Как валидировать форму.
2. Сообщения валидации и как они работают.
3. Добавление собственных правил валидации.
4. Что именно происходит, когда мы вызываем метод валидации.

Как валидировать форму
Есть 2 основных способа, чтобы валидировать форму.1. Использовать имена классов как правила Как это работает

Мы добавляем к полю, которое нужно провалидировать, html атрибут «class», и это подключит валидацию.
Итак, если нам нужно, чтобы текстовое поле было обязательным мы добавляем в элемент input значение атрибута class = «required»

Html


JavaScript
$(document).ready(function() { $("form").validate(); });
Так вы можете добавить к определенным классам несколько правил.

Плюсы и минусы такого подхода:
Работает только с правилами, которые не принимают аргументов.
Мы используем html атрибут «class» для того, для чего он не предназначен.
Но его легко установить.

Использование метода «addClassRules»
Использование функции «addClassRules» дает нам возможность использовать составное правило для одного класса.

JavaScript
$.validator.addClassRules({ name: { required: true, minlength: 2 }, zip: { required: true, digits: true, minlength: 5, maxlength: 5 } });
Этот код добавляет 2 новых правила для класса «name» и «zip», и, если у нас есть элемент «input», у которого класс «zip», то к нему применяются правила: его значение является обязательным, пользователь может вводить только цифры и длина должна быть точно 5 символов.

Html

Информация: Чтобы использовать собственное сообщение для определенного правила requires в составном правиле, нам нужно придумать псевдоним для правила «required», создать новое правило с этим псевдонимом и установить для него сообщение по умолчанию.

JavaScript
$.validator.addMethod("newrequired", $.validator.methods.required, "new name is required");
Или мы можем использовать html атрибут «title», его значение будет сообщением об ошибке для составного правила.

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

2. Добавление правил как JSON объекта к методу validate() По названию, вы должны были догадаться, что этот метод валидации принимает объект json, поэтому мы можем определить поля, которые нам нужно валидировать и правила валидации для них.

Html

JavaScript
$("form").validate({ rules: { userEmail: { email: true, required: true } } });
Заметка: Когда мы передаем объект «rules» функции «validate» ключом должно быть значение атрибута «name», а не значение «id». Как можно увидеть в примере: ключ -это «userEmail», значение атрибута «name», а у атрибута «id» другое значение.

Плюсы и минусы этого подхода:

Этот подход дает нам возможность использовать больше правил валидации, которые принимают аргументы, такие как minlength, remote, equalTo и т.д.
Отличный и настраиваемый вручную контроль над всем.
Но пользователь должен делать отдельную функцию «validate» с разными опциями для каждой формы.

Добавление или удаление динамических правил.Добавление правил Чтобы добавить правило мы должны использовать метод «rules» для элементов jQuery после того как форма провалидирована и передавать как первый параметр строку «add» и как второй параметр - объект правил, которые мы хотим добавить к этому элементу (также мы можем передавать объект «сообщение» для правил, которые мы добавили).

JavaScript
$(".input").rules("add", { required: true, messages: { required: true } })

Удаление правил Если мы хотим удалить правило или набор правил, мы передаем строку «remove», как первый параметр для метода «rules», а вторым параметром будет строка, которая содержит правила, которые мы хотим удалить, отделенные пробелом.

JavaScript
$(".input").rules("remove", "min max");

Подход настройки вручнуюJavaScript
var validator = $("form").data("validator"); validator.settings.rules.objectName = { required: true }
Этот подход очень полезен, если у вас есть созданные правила и объекты сообщений, вы можете расширить правила валидатора своими собственными:

JavaScript
$.extend(validator.settings, { rules: rules, messages: messages });

Сообщения валидации и как они работают Есть три способа настроить сообщение валидации

1. Передать объект «messages» методу «validate». Объект «messages» состоит из пар ключ\значение. Ключ - это значение атрибута «name» элемента. Значение - объект, содержащий каждое правило и его сообщение.

JavaScript
$("form").validate({ rules: { userEmail: { email: true, required: true } }, messages: { userEmail: { email: "Please enter your email", required: "*" } } });
2. Определить значение атрибута «title» элемента

Html

3. Использовать сообщение по умолчанию. Когда определяется правило валидации, есть встроенные сообщения по умолчанию для встроенных правил.

Заметка: Эти три способа переопределяют друг друга, основываясь на приоритетности, самый приоритетный - переданный объект «messages», а наименее приоритетный - сообщение по умолчанию.

Добавление собственных правил валидации Когда мы хотим добавить больше правил валидации, чем определены по умолчанию, мы используем метод
$.validator.addMethod

Этот метод принимает как параметры следующее:

• имя правила;
• функцию, которая осуществляет валидацию;
• сообщение по умолчанию.

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

JavaScript
function validationMethod (value, element) // OR function validationMethod (value, element, params)
Давайте объясню эти параметры.
Значение: значение DOM элемента, который будет валидироваться
Элемент: сам элемент DOM
Параметры: то, что мы передаем как значение. Для этого примера правила валидации - это то, чему должен равняться params.

JavaScript
$("form").validate({ rules: { firstname: { compare: { type: "notequal", otherprop: "lastname" } } } });
в этом примере params будет равен {type:«notequal», otherprop: «lastname»}

Пример добавления собственного правила:

JavaScript
$.validator.addMethod("notnumbers", function(value, element) { return !/*/.test(value); }, "Please don"t insert numbers.")

Что именно происходит, когда мы вызываем метод «validate»

Когда мы вызваем метод validate на форме, за кулисами происходит много разных вещей:

Создается объект «validator» со всеми правилами и опциями, присоединенными к форме.
Метод «validate» присоединяет «validator» используя "$.data". Мы можем получить его выбрав форму и вызвав функцию jQuery "$.data" и передать ее «validator». Объект «vaidator» - это все метаданные для валидации, которые дают нам возможность доступа к опциям валидации в любое время жизненного цикла страницы.
Используя этот объект, мы можем изменить во время выполнения опции, которые мы передали методу валидации, такие как добавление или удаление правил, изменение поведения, если поле валидное или невалидное, или даже введение селектора игнорирования.

JavaScript
//getting the validator var validator = $("selector").data("validator")
Заметка: Когда вы вызываете метод «validate» на форме, которая уже провалидирована, он вернет только объект «validator», используется также $.data, и все предыдущие опции, переданные методом «validate», будут стерты.

JavaScript
var validator = $(".selector").validate(/* rules will be omitted */)

Присоединение событий формы
Что произойдет, когда мы нажмем submit(отправить форму), и в форме будет введено неверное значение для поля, к которому мы присоединили валидацию. Если одно из полей невалидное, то плагин валидации будет присматриваться к нему более пристально, чтобы проверять, валидное оно или нет, по событиям на этом поле.
Сообытия формы, на которые подписывается плагин - это «click», «focusin», «focusout», «keyup», «submit».
Заметка: Вы можете отключить валидацию по определенным событиям, передав их как ключи в методе validate, и false в качестве значений.

JavaScript
$(".selector").validate({ onfocusout: false, onkeyup: false, onclick: false, onsubmit: false });

Перевод статьи Nadeem Khedr «How the jQuery validate plugin works internally"".

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

Валидацию на jquery сделать намного проще. Существуют несколько плагинов jquery для проверки полей формы. Я покажу вам очень простой способ. Вы сможете его видоизменить и добавить свои фирменные проверки. Образно говоря, в один массив будут помещены ошибки. Затем этот массив превратится в сплошную строку. Вы увидите на выводе сразу несколько ошибок.

Вставьте следующий код в документ html. Обратите внимание на то, что у вас одна кнопка и 3 поля.

form { margin:10px; border: 1px solid gray; } input { margin:5px; border: 1px solid gray; }


// validation form jquery $("input").click(function (){ // собираем данные в один массив var title = $("input").val().trim(); var text = $("input").val().trim(); var cat = $("input").val().trim(); //обрабатываю данные var error_arr = ; if(title.length == 0) error_arr.push("описание"); if(text.length == 0) error_arr.push("текст"); if(cat.length == 0) error_arr.push("категорию"); // проверка на наличие ошибок if(error_arr.length > 0){ alert("Вы не заполнили следующие поля:\n" + error_arr.join(", ")); // блокировка перехода на другую страницу return false; }else{ console.log("Ошибок нет!"); } });

Давайте рассмотрим сам скрипт для валидации формы. Сначала собираются данные в переменные. Обязательно сделайте очистку данных от пробелов. " " - это тоже символ. Далее происходит проверка данных на наличие символов. Вы можете добавить свои фирменные проверки. Даже можете использовать регулярные выражения. Всё зависит от поставленной задачи. Затем происходит финальная проверка на наличие ошибок. Если есть хотя бы одна ошибка, то алерт выведет ошибку. Обратите внимание на join(). Эта функция собирает все элементы массива и выводит их в виде строки через разделитель. Читайте о массивах на странице массивы в javascript . Я не использую циклы и функцию each(). Так проще)). Если ошибок нет, то скрипт переместит вас на новую страницу и данные отправятся. В случае ошибки валидации перехода на другую страницу не будет. Вы увидите предупреждение и вывод всех ошибок (Вы не заполнили следующие поля: описание, текст, категорию).

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

Принципы

Задача дизайнера - сделать так, чтобы пользователь не совершил ошибку и валидация не понадобилась, для этого:

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

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

Пишите подсказки для заполнения формы. Например, плейсхолдер в полях ввода.

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

Виды валидации

Существует три вида валидаций: мгновенная, по потере фокуса и по отправке формы.

Чем раньше интерфейс сообщает об ошибке, тем лучше - пользователю проще вернуться и исправить ошибку.

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

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

Валидация по потере фокуса Когда использовать Как работает

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

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

Текст ошибки появляется в тултипе, когда поле получает наведение или фокус:

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

Красная подсветка снимается с поля, как только пользователь начал исправлять ошибочное значение.

Валидация при отправке формы Когда использовать

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

Как работает

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

При прокрутке к первому полю от верхней границы окна до ошибочного поля остается отступ 50 px.

Блокирование кнопки отправки

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

Как только заполнены все обязательные поля - кнопка становится активной. Если после этого пользователь стер значение в одном из полей - кнопка снова должна стать не активной.

Сообщения об ошибках

Об ошибках можно сообщать двумя способами:

Тултипы Как работают

Тултип с подсказкой появляется в двух случаях:

При наведении на поле с ошибкой.

Когда поле с ошибкой получает фокус.

Тултип по наведению перекрывает тултип по фокусу.

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

Единообразие поведения и внешнего вида

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

Красные тексты на странице Как работают

Красный текст ошибки появляется сразу, как только произошла ошибка и поле подсветилось, и пропадает, как только исчезает подсветка поля.

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

Если справа от поля нет места для текста, раздвигайте форму и выводите сообщение под полем.

На более сложных формах выводите сообщение об ошибке в тултипе.

Валидация зависимых полей

Зависимые поля - это поля, значение которых зависит друг от друга.

Ошибки, которые связаны с нарушением зависимости полей, мы показываем после сабмита формы. Например, ИНН и КПП. Если пользователь указал ИНН из 10 цифр, а поле с КПП оставил пустым, после отправки формы пустое поле с КПП будет подсвечено.

ИНН может быть двух видов:

• 10-значный у юридических лиц
• 12-значный у ИП.

Если пользователь указал ИНН из 12 цифр, значит организация - индивидуальный предприниматель, и у нее нет КПП, значит поле КПП заполнять не нужно. И наоборот, если заполнено КПП, а ИНН указан 12-значный, возможно неверно указан ИНН.

Подсветка зависимых полей пропадает, как только пользователь начал исправлять значение в одном из этих полей.

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

Пример

Есть форма из 5 полей:

• Название организации - простое текстовое, обязательное
• ИНН - 10 или 12 цифр, проверка контрольной суммы по потере фокуса, обязательное
• КПП - 9 цифр с проверкой контрольной суммы по потере фокуса, обязательное, если ИНН состоит из 10 цифр
• Электронная почта - адрес почты, проверка по потере фокуса по маске [email protected], необязательное
• Телефон - международный формат, проверка по потере фокуса по маске +00000000000, обязательное