Примеры валидации форм с помощью JQuery
При использовании форм на сайте стоит осуществлять проверку введённых данных. Это не только обеспечивает правильность введенной информации, но и улучшает пользовательский опыт.
Существует два вида валидации: на стороне клиента и на стороне сервера. Рекомендуется использовать оба типа проверки. Валидация на стороне клиента чаще всего реализуется с помощью JavaScript. Она предоставляет пользователям быстрый ответ об ошибках ввода, прежде чем отправить данные на сервер.
Валидация на сервере служит второй линией защиты от получения неверных данных. Всегда нужно проверять данные на сервере, поскольку JavaScript можно обмануть.
В этой статье мы рассмотрим, как с помощью jQuery выполнить валидацию на стороне клиента. Сначала проверим данные формы, написав правила валидации с нуля.Во втором примере покажем, как этот процесс упростить с помощью плагина jQuery Validation.
Для начала подключите библиотеку jQuery в HTML-файле.
Добавьте следующую форму.
Приведенный выше код выведет простую форму с четырьмя полями и кнопкой отправки данных.
Для формы используйте следующие стили CSS.
Добавьте следующий код JavaScript в файл HTML.
Отправьте форму с некорректными данными, и вы увидите сообщения об ошибках.
Использование плагина jQuery Validation
Чтобы увидеть плагин в деле, подключите jQuery в файле HTML.
Добавьте вторую форму в ваш файл.
После указания правил, мы добавили сообщения об ошибках, которые отобразятся, если правило не будет соблюдено.Откройте веб-страницу и протестируйте форму. Вы должны увидеть те же результаты валидации полей формы.
Пожалуйста, опубликуйте свои мнения по текущей теме материала. Мы очень благодарим вас за ваши комментарии, подписки, лайки, отклики, дизлайки!
Пожалуйста, опубликуйте ваши комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, дизлайки, отклики, лайки, подписки!
Простая проверка полей формы на заполненность с помощью jQuery
Сегодня хочу поделиться с Вами простым методом проверки полей формы на заполненность перед отправкой сообщения с помощью jQuery. Скрипт написал я сам, хотя, несколько лет назад такого написать не получилось, ? а очень надо было. Не будем ходить вокруг да около, а займемся делом.
Для того, чтобы нам было что проверять, нужно составить HTML каркас формы, и чуток ее приукрасить CSS стилями, например я по-быстрому сверстал вот такой каркас:
Немножко описания того, что я написал в каркасе формы:
Ну и как всегда совсем немножко стилей для формы:
Стили достаточно примитивные, поэтому описывать их смысла нет)
Плацдарм для написания скрипта проверки полей формы готов.
Пишем jQuery скрипт:
Пришло время открыть самое интересное: механизм проверки полей формы. Все пояснения в листинге скрипта:
Протестировать работоспособность скрипта можно кликнув по кнопке Demo, также можно скачать исходники к данному уроку кликнув по кнопке Source:
Заключение
Самый приятный момент работы, написанного мною, скрипта это то, что он проверяет все указанные формы на странице, да и проще метода, не используя сторонние плагины, не найти (мне так кажется) и мне нравится, так сказать, сам механизм его работы, нет необходимости проверять каждое поле формы (как я делал когда-то). Надеюсь Вам пригодится мой скромный скрипт (хехе) в новых проектах.
Все пожелания, замечания, критику и полезные советы оставляйте в комментариях (я их читаю и стараюсь отвечать). По возможности кликайте на ссылки социальных сетей, чтобы поделиться с друзьями этой новой важной инормацией.
Проверка формы jQuery
Здравствуйте, уважаемые читатели блога LifeExample, в статье «Проверка формы jQuery«, хочу посветить немного времени на разработку одной очень нужной составляющей любого сайта. Говорить сегодня мы будем, о том, что такое проверка формы на заполнение, какими бывают проверки и как реализовать проверку формы на jQuery.
Для начала выясним, что же такое форма. В данном контексте под словом форма, мы будем понимать HTML элемент страницы FORM. Формой в HTML является совокупность элементов позволяющих пользователю изменить их содержимое, и отправить данные на сервер. Такими элементами могут являться:
Какими бывают формы
Со значением форм разобрались, теперь давайте подумаем, где они используются, а также где и в какой проверке нуждаются.
На самом деле формы многих сайтов очень похожи друг на друга, по смыслу и назначению. Как правило, особо популярные и необходимые формы бывают трех типов
Согласитесь, что это очень распространённые элементы любого сайта, и сложно встретить тот ресурс, на котором бы не было данных форм.
Ну а раз, регистрация, авторизация и обратная связь, так важны, то и не менее важной становится поверка форм на корректность ввода. Иногда хватает проверки лишь на заполнение полей, но зачастую появляется необходимость в:
Целью данной статьи я хочу выделить: простую реализацию с помощью библиотеки jquery, проверку формы.
Кстати говоря, о проверке формы на jQuery, стоит заметить, что это не очень безопасное занятие, в том случае если оно не поддерживается контрольной проверкой на стороне сервера.
Я имею в виду такую ситуацию. Представим, что данные введенные пользователем проверяются только jQuery и JavaScript’ом на стороне клиента, в этом случае какой бы хорошей не была проверка, всегда можно скопировать код формы страницы, и вручную послать любые не проверенные данные, в которых может запросто содержаться sql-инъекция. Поэтому я рекомендую реализовать еще и проверку полученных данных на PHP, это не только защитит вас от возможных атак, но и даст возможность работать с сайтом пользователям, у которых отключен JavaScript.
Ну, все хватит воды, давайте выделим основные задачи, и приступим к их выполнению.
Главная цель: Проверка формы jquery.
Задачи:
Забыл упомянуть, я хочу создать пример проверки формы, такой который смог бы учесть в себе самые распространенные функции вышеперечисленных форм, для того чтобы в будущем обратившись к этому примеру, я и вы уважаемые читатели смогли бы быстро подкорректировать его под наши текущие нужды.
Создадим HTML форму (Шаг 1)
Я подумал, что больше всего проверок встречается в форме регистрации, поэтому мы возьмем ее за основу.
Внешне, наша стандартная форма регистрации будет выглядеть вот так:
Основным для нас в скачанном файле является блок edit_form выводящий таблицу полей, со следующей структурой элементов:
Также в предложенном файле имеется часть, определяющая CSS стили и собственно та часть, в которой будет расположен код проверки формы jQuery.
Пишем проверку заполнения формы на jQuery (Шаг 2)
Основной и неотъемлемой частью процесса валидации формы является выявление пустых обязательных полей. Для того чтобы решить эту задачу можно воспользоваться вот таким кодом проверки, на чистом JavaScript:
Но, так как мы ставили целью проверить форму jQuery. То второй вариант решения этой задачи нам подойдет больше:
Данное решение полностью исключит возможность отправки формы на сервер, если обнаружит, хотя бы одно не заполненное поле из массива field. Кроме того скрипт выведет сообщение об ошибке в блок messenger и подсветит красной рамкой все не заполненные поля.
Проверка корректности e-mail (Шаг 3)
Для этого нужно немного представлять, что такое регулярные выражения, и для чего они нужны, о чем было рассказано в статье «Регулярные выражения в PHP».
Итоговый скрипт проверки корректности поля e-mail содержит в себе не много строк, и является достаточно простым для понимания.
Добавим в разрабатываемый скрипт проверки формы jquery, следующие строки кода:
Вставить данный кусок кода нужно сразу перед вот этой строкой:
А также необходимо прописать текст ошибки
Кроме всего этого нужно не забыть определить функцию, которая будет проверять корректность введенного e-mail:
Содержимое функции isValidEmailAddress() выглядит немного пугающе, но не стоит обращать внимание на сложное регулярное выражение. Ведь принцип её работы очень простой: если переданная строка соответствует правилам оформления e-mail адреса, то возвращается true, иначе false.
Сравнение паролей (Шаг 4)
Для полного удовлетворения проверкой формы, нам осталось сравнить введенные пароли. Да же и не знаю, стоит ли описывать алгоритм, поскольку он настолько прост, что даже жалко тратить на него время, но все же раз обещал сделать полноценную проверку формы на jquery значит сделаю.
Весь алгоритм сводится к получению значений двух полей с паролями, и проверки их на соответствие:
Также как и с проверкой поля e-mail, нужно дописать в блок определения текста ошибки обработчик для error=3.
Вывод
Результатом наших действия явилась вполне красивая проверка полей формы. Радует, что не пришлось прибегать к использованию дополнительных плагинов, таких как jquery.validate.js и jquery.form.js. Пишите свои вопросы, если таковые имеются в комментариях к статье.
Читайте также похожие статьи:
Чтобы не пропустить публикацию следующей статьи подписывайтесь на рассылку по E-mail или RSS ленту блога.
Простая валидация форм с помощью плагина jQuery
Из этой статьи вы узнаете, как реализовать простую валидацию формы с помощью jQuery-плагина.
Использование jQuery-плагина для проверки данных в форме удобно по нескольким причинам. Этот способ предоставляет дополнительные опции – например, возможность выводить сообщения об ошибках и добавлять обработку различных условий проверки. Применение готового плагина также позволяет добавлять валидацию в формы без внесения видимых изменений в макет страницы. Условия проверки можно с легкостью изменять, добавлять и удалять на любом этапе разработки.
Приступаем к работе
Перед использованием расширения на странице нам нужно будет добавить к нашему проекту необходимые файлы. Таких файлов два – первый включает в себя основную функциональность плагина для проверки базовых пользовательских данных. Второй файл содержит дополнительные методы валидации для проверки номеров банковских карт, телефонов и так далее.
Добавить файлы в проект можно с помощью менеджера пакетов – Bower или npm. Кроме того, можно получить прямую CDN-ссылку на эти файлы и вставить ее в тег script на странице. Поскольку это jQuery-плагин, вам также понадобится ссылка на соответствующую библиотеку:
Валидация первой формы
Рассматриваемый нами плагин можно использовать без внесения каких-либо заметных изменений в разметку страницы. Единственная поправка, которую вам потребуется сделать – это добавить id или class к форме, к которой нужно подключить валидацию.
Ниже приведена разметка базовой формы, ввод данных в которой мы будем проверять с помощью jQuery-плагина.
Для проверки введенной информации не потребуется написание дополнительного кода на JavaScript. При этом плагин обеспечит вывод сообщений об ошибках под каждым текстовым полем. У нас также будет возможность оформить сообщения в любом желаемом стиле.
Для подключения валидации к этой форме надо всего лишь вставить приведенный ниже фрагмент, написанный на JavaScript, в код страницы:
Подразумевается, что вы уже добавили к проекту необходимые файлы плагина. Вставка приведенного выше фрагмента кода обеспечит надлежащую проверку формы и вывод сообщений об ошибках. Вот рабочая демонстрация плагина:
Рассматриваемая нами библиотека обеспечивает максимально дружеское отношение к пользователю: сообщения об ошибках появляются только в том случае, когда это действительно необходимо. К примеру, если вы пройдетесь по полям для ввода имени и адреса электронной почты, не вводя никаких данных, сообщения об ошибке вы не получите. Однако если вы перейдете на поле для ввода email-адреса после введения всего одной буквы в поле имени, вы увидите сообщение о том, что имя должно состоять как минимум из трех символов.
Опции validate() метода
В предыдущем примере мы вызывали метод validate() без передачи ему каких-либо параметров. Однако у нас есть возможность передать этому методу объект, содержащий множество параметров. Значения этих параметров будут определять способы, с помощью которых плагин будет проводить валидацию данных, выводить ошибки и так далее.
Добавление правил валидации для полей ввода
Вы также можете передать определенные правила в метод validate() для установления правил, в соответствии с которыми должна проверяться введенная информация. Значением параметра rules должны быть пары «ключ-значение». Ключом в каждом случае является название проверяемого элемента, а значением – набор правил для проверки информации.
Также можно добавить проверку условий данных в различных полях – с использованием ключевого слова depends («зависит от») и возвращая, соответственно, результат true («истинно») или false («ложно»). Ниже приведен пример использования простого набора правил для определения корректности введенных данных:
Создание собственных сообщений об ошибках
Ниже приведен пример кода, который обеспечивает вывод сообщений об ошибках при вводе неверных данных в любое из полей формы:
Как и правила, messages опираются на названия полей ввода. Каждое из этих полей принимает объект, состоящий из ключа и значения. Ключом является правило валидации, а значением – сообщение об ошибке, которое выводится в случае нарушения правила.
Как вы сможете убедиться, плагин отображает сообщения об ошибках, используемые по умолчанию в том случае, если вы не предоставили ему свои собственные. Попробуйте ввести различные данные в приведенный ниже демонстрационный образец, и вы увидите как стандартные, так и кастомные уведомления об ошибках.
Кастомизация сообщений об ошибках
Иногда возникает необходимость добавления собственных классов к элементам ввода – для использования дополнительных правил или для лучшей интеграции с существующей темой оформления сайта.
Если пользователь вводит корректные данные, дополнительные метки к форме не добавляются. Таким образом, классы validClass остаются присвоенными корректным входным элементам.
Дополнительный JavaScript-код используется только для присвоения классов:
Помимо создания стиля для сообщений об ошибках, мы также добавим собственный стиль к допустимым входным элементам. Ниже приводится демонстрационный пример с готовым результатом.
Дополнительные опции настройки плагина
Рассмотренные варианты – наиболее типичные опции валидации данных. Кроме этих вариантов, вам могут пригодиться и некоторые другие – например, если вы захотите изменить местоположение уведомлений или сгруппировать их вместе.
Формы jQuery, доступные на CodeCanyon
Самостоятельная реализация валидации данных – очень полезный навык. Дополнительную функциональность помогут добавить готовые пакеты, созданные на основе jQuery и JavaScript.
1. Конструктор пошаговых jQuery форм Timon Step Form
Если вам нужна пошаговая форма, обратите внимание на пакет Timon Step Form. В состав этого набора входит множество готовых элементов форм, а также коллекция эффектов перехода. Это визуальный конструктор, для его использования не нужны навыки программирования. Имеется встроенная jQuery-валидация входных данных.
2. Smart Forms
Smart Forms представляет собой полнофункциональный фреймворк для создания, как простых, так и сложных форм. В его состав входит поддержка Google reCAPTCHA, проверка номеров телефонов и многое другое. Валидация реализована на jQuery, что делает данный фреймворк отличным выбором.
3. Just Forms Advanced
Название данного пакета говорит само за себя – это инструмент для создания продвинутых форм. В поставку входит более 110 готовых форм, а сам фреймворк позволяет разработать уникальную форму самостоятельно.
4. Forms Plus JS
Forms Plus – фреймворк для создания форм с валидацией и вычислениями. Включает в себя более 100 шаблонов для разработки форм. Поддерживает:
5. Sky Forms
Мы заканчиваем обзор на фреймворке Sky Forms. Данный пакет включает в себя обширный набор стильных элементов, более 300 векторных иконок и множество цветовых схем, поддерживает любую кастомизацию. Предусматривает обработку шести состояний для элементов ввода, включая наведение курсора, фокус и так далее. Формы, созданные с помощью Sky Forms, корректно работают во всех наиболее популярных браузерах.
Заключение
В этой статье мы рассмотрели, как можно вывести валидацию форм на новый уровень, используя jQuery- плагин. Реализация проверки данных на основе JavaScript предоставляет разработчику дополнительный контроль над вводом, в отличие от базовой HTML-валидации. К примеру, вы сможете без труда добавить к форме сообщения об ошибках, которые будут выводиться, если пользователь введет недопустимые данные в соответствующие поля ввода.
В то же время вы сможете определить, какие действия пользователя и для каких входных элементов плагин должен игнорировать. Я настоятельно рекомендую изучить официальную документацию к плагину и некоторые примеры его использования.
Валидация форм
»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.
Основной причиной, по которой приходится прерывать процесс отправки браузером данных формы на сервер является наше желание убедиться в том, что введенные пользователем в полях формы данные корректны.
В определенный момент каждый веб-программист начинает осознавать, что пользователь может ввести в элемент input все, что угодно. Число различных значений, обработка которых может понадобиться, бесконечно, однако, как показывает мой опыт, существуют всего лишь несколько причин, по которым пользователи иногда вводят в форму совершенно неожиданные данные:
Первая из них — это непонимание пользователем того, ввод каких данных от него ожидается. Вы, например, запрашиваете имя, указанное на кредитной карте, а пользователь вводит ее номер.
Вторая причина — это нежелание пользователя предоставлять вам запрошенную информацию, и он лишь стремится поскорее закончить заполнение формы. Он готов ввести любое значение, чтобы перейти к следующему шагу. Если у вас накопилось изрядное количество новых пользователей, которые в качестве своего адреса электронной почты указали а@а.com, то вы поймете, что это действительно является проблемой.
Третьей причиной может быть то, что пользователь просто не в состоянии предоставить вам запрашиваемую информацию. Разве может житель России корректно ответить на вопрос о том, в каком штате он проживает? В России нет такой единицы административного деления, как штат.
Наконец, пользователь может просто ошибиться, что чаще всего связано с обычными опечатками. Например, я печатаю быстро, но не всегда правильно.
Что касается опечаток, то здесь ничего не поделаешь, но от того, как вы справитесь с тремя остальными причинами, зависит, будет ли работа пользователя с вашим приложением идти, как по маслу, или приложение будет лишь раздражать пользователей.
Я не хочу вдаваться в долгие рассуждения относительно дизайна веб-форм и лишь замечу, что лучше всего подходить к решению этого вопроса с точки зрения потребностей пользователя. И если что-то идет не так, постарайтесь взглянуть на проблему (и на возможные пути ее решения) глазами пользователя.
Ваши пользователи не знают о том, каким образом вы создавали систему, и им ничего не известно о том, как организованы ваши бизнес-процессы; их интересует лишь конечный результат. Все будут только счастливы, если вы сосредоточитесь на тех задачах, которые пользователь стремится выполнить, и не будете без нужды наказывать его, если он не предоставит требуемые данные.
В библиотеке jQuery имеются все необходимые средства для создания собственной системы контроля введенных данных, но я рекомендую другой подход. Один из подключаемых модулей jQuery, пользующихся наибольшей популярностью, называется Validation, и уже само это название говорит о том, для чего он предназначен, поскольку валидация данных — это процесс проверки введенных данных на предмет их соответствия определенным правилам, условиям или ограничениям проще говоря — проверки их корректности.
В этой статье речь идет о контроле данных на стороне клиента. Этот процесс дополняет, но не заменяет контроль данных на стороне сервера, в ходе которого данные проверяются в том виде, в каком они поступают на сервер. Проверка данных на клиентской стороне осуществляется в интересах пользователей, поскольку она направлена на то, чтобы избавить пользователей от многократных попыток отправки на сервер неправильных данных, которые затем все равно придется исправлять, теряя драгоценное время.
Проверка данных на серверной стороне выполняется в интересах приложения и направлена на то, чтобы некорректные данные не могли стать источником всевозможных проблем. Вы обязаны использовать оба вида проверки, поскольку обойти проверку на клиентской стороне не составляет большого труда, и она не гарантирует надежной защиты вашего приложения.
Настройка параметров проверки
Первое, что вы должны сделать — это добавить в документ подключаемый модуль Validation, как показано ниже:
Здесь указана версия, предназначенная для отладки, но ничто не мешает использовать минимизированную версию этого файла. Кроме того, ввиду популярности данного модуля, он предлагается для загрузки многими, хотя и не всеми, службами CDN.
Следующим шагом является настройка параметров проверки формы. Для этого следует вызвать метод validate() для тех элементов формы, которые вы хотите проверить. В качестве аргумента методу validate() передается объект отображения данных, содержащий конфигурационные настройки, как показано в примере ниже:
Здесь задаются значения четырех параметров (highlight, unhighlight, errorElement и errorClass), назначение которых мы обсудим позднее.
Своей гибкостью подключаемый модуль Validation во многом обязан разнообразию предусмотренных в нем способов простого и быстрого определения правил проверки корректности ввода. Существует много способов связывания правил с элементами. Я предпочитаю тот из них, который основан на использовании классов. Вы определяете набор правил и связываете их с классом, а когда форма подвергается проверке, правила применяются лишь к тем элементам, которые принадлежат указанному классу.
В примере, представленном в примере ниже, создается одно правило:
В данном случае создается правило, которое будет применяться ко всем элементам, принадлежащим классу flowerValidation. Правило состоит в том, что значение должно быть больше или равно 0. Данное условие выражено в правиле путем указания контрольной проверки min. Это лишь один из многих удобных предопределенных видов контрольной проверки, предоставляемых модулем Validation, и все они будут описаны далее.
Связывание правил с элементами формы достигается путем добавления элементов в класс, указанный на предыдущем шаге. Это позволяет настраивать правила для разных типов элементов. В этом примере все элементы обрабатываются одинаково, и потому все элементы ввода выбираются с помощью jQuery и добавляются в класс flowerValidation, как показано ниже:
Здесь также используется функция, привязанная к событию change. Она непосредственно выполняет проверку элемента, значение которого было изменено. Это гарантирует немедленную обратную связь с пользователем в случае исправления им ошибки.
Также необходимо добавить CSS-правила в разметку документа, для классов, идентифицирующих ошибки:
Результат работы подключаемого модуля Validation представлен на рисунке:
Как и в случае организации проверки данных собственными средствами, пользователь не сможет отправить форму до тех пор, пока не устранит проблему, но на этот раз он видит, какие именно значения неверны, и ему даются рекомендации по устранению ошибки. (Согласен, что это сообщение выглядит довольно абстрактно, но, как будет далее показано, можно изменять текст сообщений по своему усмотрению.)
Использование встроенных проверок
Подключаемый модуль Validation поддерживает большое количество встроенных проверок данных, введенных в полях формы. С одним из них (min) вы уже познакомились в предыдущем примере. Полный список встроенных проверок представлен в таблице ниже:
| Проверка | Описание |
|---|---|
| creditcard: true | Значение должно содержать номер кредитной карты |
| date: true | Значение должно быть действительной датой JavaScript |
| digits: true | Значение должно содержать лишь цифры |
| email: true | Значение должно быть действительным адресом электронной почты |
| max: maxVal | Значение не должно превышать maxVal |
| maxlength: length | Значение должно содержать не более length символов |
| min: minVal | Значение не должно быть меньше minVal |
| minlength: length | Значение должно содержать не менее length символов |
| number: true | Значение должно быть десятичным числом |
| range: [minVal, maxVal] | Значение должно находиться в пределах указанного диапазона |
| rangelength: [minLen, maxLen] | Значение должно содержать не менее minLen и не более maxLen символов |
| required: true | Значение обязательно должно быть указано |
| url: true | Значение должно быть URL-адресом |
Несколько правил могут быть объединены в одно. Тем самым обеспечиваются компактность и наглядность кода, осуществляющего проверку. Эти правила могут применяться к элементам несколькими способами. Все они описаны в следующих разделах.
Применение правил проверки на основании принадлежности классам
Чаще всего я пользуюсь методикой, в которой применение правил проверки основывается на классах элементов. Именно такой подход предпринят в данном примере. Однако ничто не заставляет вас ограничиться только одним видом проверки. Для проверки различных аспектов значения, предоставленного пользователем, можно объединить в одном правиле несколько видов проверки, как показано в примере ниже:
В этом примере проверки required, digits, min и max объединены в одно правило, позволяющее убедиться в том, что предоставленное пользователем значение является обязательным для ввода, включает только цифры и находится в интервале от 0 до 100.
Доступ к каждому проверяемому элементу формы осуществляется индивидуально, а это означает, что диагностические сообщения, выводимые для пользователя, будут разными, в зависимости от характера возникшей проблемы, как показано на рисунке:
Здесь введено несколько значений, каждое из которых не проходит одного из видов проверки. Важно отметить, что проверки выполняются в том порядке, в каком они определены в правиле. Если вы посмотрите на сообщение для продукта «Пион», то увидите, что оно не прошло проверку digits. Изменив порядок определения проверок, вы получите другое сообщение.
Применение правил проверки непосредственно к элементам
Следующая методика позволяет применять правила к определенным элементам, как показано в примере ниже:
Обратите внимание: мы вызываем метод, определяющий правила, для объекта jQuery и передаем ему строку add и объект отображения данных с видами проверок, которые хотим выполнить, и их аргументами. Метод rules() воздействует лишь на первый элемент выбранного набора, и поэтому для расширения сферы его действия мы должны использовать метод each(). В данном случае выбираются все элементы input, являющиеся потомками элемента row1, к которым и применяются указанные проверки.
При вызове метода rules() можно добавлять и удалять отдельные проверки, используя соответственно методы add() и remove().
Правила, применяемые к элементам с использованием методов rules(), интерпретируются до того, как будут интерпретироваться правила, применяемые с использованием классов. В контексте нашего примера это означает, что элементы верхнего ряда будут проверяться с использованием значения min, равного 10, и значения max, равного 20, в то время как к другим элементам input будут применяться соответственно значения 0 и 100. Результат представлен на рисунке:
Изменение диагностических сообщений проверки
В модуле Validation для всех встроенных проверок определены сообщения об ошибках, используемые по умолчанию, однако все они типовые, и пользователь не всегда может извлечь из них полезную информацию (тем более, что они представлены на английском языке).
К счастью, у вас есть возможность изменить текст этих сообщений, вставив в них некоторую дополнительную информацию в соответствии с конкретными задачами. Какой именно метод используется для изменения сообщений об ошибках, зависит в первую очередь от того, каким способом были созданы правила проверки. В тех случаях, когда применяемые правила основаны на классах, изменить сообщения нельзя.
Когда правила применяются к отдельным элементам, можно передавать им объект messages, содержащий требуемые тексты диагностических сообщений. Соответствующий пример приведен ниже: