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

Вам когда-нибудь приходилось искать скрипты и плагины для валидации произвольных форм и контейнеров? Когда тэг "form" не используемая конструкция? И когда необходимо проверять корректность полей в любое время, а не по зашитым концептуальным механизмам? Можно долго спорить о необходимости соблюдать стандартны и поддерживать отправку данных через полную перезагрузку страницы. Тем не менее, сегодня, большинство web-приложений уже не возможно представить без поддержки javascript-a. Отключите javascript - и сервисы станут бесполезными, несмотря на то, что вы сможете зарегистрироваться, войти и пройтись по нескольким страницам.

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

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

Рассмотрим существующие плагины для валидации форм на jQuery

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

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

• Жесткая привязка к тэгу "form" . Поэтому если у вас есть несколько десятков форм, построенных на div-ах или таблицах, и вы твердо решили использовать популярные решения, то готовьтесь потратить кучу времени на ручное добавление тегов и корректировку скриптов и стилей.
• Привязка к именам полей . Некоторые валидаторы привязываются к названиям полей, а это значит написание простыней javasript-а для каждого случая. Если для пары форм это не страшно, то для коллекции это уже означает длительную ручную генерацию кода.
• Отсутствие валидации по требованию , без необходимости инициализации плагина. Вы не можете взять и один раз вручную проверить форму. Нужно правильно составить форму (правда, это везде нужно, но суть не в этом), затем инициализировать движок плагина, который в обязательном порядке привяжет кучу скриптов к элементам формы. И уже после этого вызвать метод isValid, который не всегда доступен в явном виде. Иногда, этот метод еще нужно "как-то" вытащить из внутренних механизмов.

Примечание : С одной стороны, вполне логично, что привязка идет к тегу форм, так как плагины появились "после". С другой стороны, сегодня скрипты позволяют быстро создавать и собирать данные из любых произвольных форм. При определенном уровне любопытства и настойчивости, вы можете легко создать форму только на тэгах "span"(div) и "input", при этом выглядеть она будет точно так же, как и все другие.

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

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

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

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

Пишем скрипт для валидации произвольных форм на jQuery

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

Прежде, чем реализовывать свой механизм, необходимо определиться с его возможностями и ограничениями:

• . Это может быть span, div, table и так далее. Важно то, что форма это отдельный элемент DOM. Сохранение данных с 15 разных контейнеров - это уже не обычная форма, с любой точки зрения.
• Скрипт должен поддерживать как валидацию на лету , так и произвольную проверку любых форм или даже отдельных полей, без каких-либо привязок скриптов или других ограничений.
• Плагин должен быть простым как с точки зрения настройки и запуска, так и с точки зрения организации и кода.
• Необходимо, чтобы его можно было расширить в любое время . Добавить валидаторы. Встроить всплывающие сообщения. И многое другое.
• Настройка валидаторов полей должна быть не только универсальной, но и простой

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

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

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

Теперь, составим тестовый проект со следующей структурой:

• css - каталог со стилями
  • template.css - файл стилей
• images - каталог для картинок для стилей валидации
  • icon-fail.png - иконка для некорректно заполненного поля
  • icon-ok.png - иконка для правильно заполненного поля
• js - каталог для скриптов
  
  • jquery-validate.js - скрипт валидации произвольных форм
• index.html - тестовая форма

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

Файл стилей - template.css

Большую часть файла стилей занимают стили самой формы, что бы демонстрационный пример выглядел привлекательно. Для самого же плагина нужны только первые два правила ".field-input.input-ok" и ".field-input.input-error"

Примечание : Старайтесь добавлять даже к тестовым формам хотя бы минимальны дизайн. Чем ближе тестовый проект будет к реальному, тем больше шансов отловить ошибки и скрытые проблемы. Например, картинка в "background" для проверенных полей будет занимать часть поля. Это означает, что для полей с большим объемом текста необходимо предусматривать отступы в стилях.

Field-input.input-ok{ background: url(../images/icon-ok.png) no-repeat right center #e3ffe5; border: 1px solid #96b796;line-height: 19px; } .field-input.input-error{ background: url(../images/icon-fail.png) no-repeat right center #ffebef; border: 1px solid red;line-height: 19px; } .clear{clear:both;}body{width: 1000px;margin:auto;} .form{float: left;width: 490px;margin-right: 5px;} .form .header{color: blue;font-size: 20px;font-family: georgia;margin-bottom: 10px} .form .label{padding: 5px;padding-left: 0px;font-size: 18px;} .form .field{margin-bottom: 10px;} .form .field-input{padding: 5px;font-size: 15px;width: 400px;} .form .save-button{cursor: pointer;margin-top: 10px;color: white;background: green;border: 1px solid #ddd;padding: 5px 10px;} .form .save-button:hover{background: rgb(60, 176, 60);}

Файл скрипта валидации произвольных форм на jQuery - jquery-valiate.js

Так как скрипт достаточно простой и в самих комментариях подробно описана вся необходимая информация, то файл приводится целиком:

(function (parentObject) { // Проверяем на повторную инициализацию if (parentObject.validation) return; //////////////////////////////////////////////// // Создаем общий интерфейс для валидации форм //////////////////////////////////////////////// parentObject.validation = { _defaultOptions: { // Контейнер. Может быть селектором или элементом container: "", // Селектор для поиска полей fieldSelector: ".field-input", // Проверка в режиме онлайн liveCheck: true, // Селектор для кнопок сабмита submitSelector: ".save-button", // Обработчик, который вызывается после успешной валидации submitHandler: null, // Класс полей с ошибками errorClass: "input-error", // Класс верных полей okClass: "input-ok", // Список валидаторов // Примечание: так как валидатор пустых полей вынесен отдельно, // то пустые строки в других валидаторах считаются как прошедшие validators: { "required": function (str) { return str.length > 0; }, "numeric": function (str) { var regExp = new RegExp("\\-?\\d+((\\.|\\,)\\d{0,})?"); return regExp.test(str) || !str; }, "alpha": function (str) { var regExp = new RegExp("^[а-яА-ЯёЁa-zA-Z\\s]+$"); return regExp.test(str) || !str; }, "alphanumeric": function (str) { var regExp = new RegExp("^[а-яА-ЯёЁa-zA-Z0-9\\s]+$"); return regExp.test(str) || !str; }, "date": function (str) { var regExpISO = new RegExp("(19|20)\\d\\d-((0|1)-(0|\\d)|(0|1)-30|(0|1)-31)"), regExpRU = new RegExp("((0|\\d)\\.(0|1)|30\\.(0|1)|31\\.(0|1))\\.(19|20)\\d\\d"); return (regExpISO.test(str) | regExpRU.test(str)) || !str; }, "datetime": function (str) { var regExpISO = new RegExp("(19|20)\\d\\d-((0|1)-(0|\\d)|(0|1)-30|(0|1)-31) (\\d+):(\\d+)"), regExpRU = new RegExp("((0|\\d)\\.(0|1)|30\\.(0|1)|31\\.(0|1))\\.(19|20)\\d\\d (\\d+):(\\d+)"); return (regExpISO.test(str) | regExpRU.test(str)) || !str; }, "time": function (str) { var regExp = new RegExp("(\\d+):(\\d+)"); return regExp.test(str) || !str; }, "digit": function (str) { var regExp = new RegExp("^+$"); return regExp.test(str) || !str; }, "password": function (str) { var regExp = new RegExp("^[а-яА-ЯёЁa-zA-Z0-9\\s]+$"); return regExp.test(str) || !str; }, "email": function (str) { var regExp = new RegExp("^(+\\.)* +(\\.+)*\\.{2,6}$"); return regExp.test(str) || !str; }, "url": function (str) { var regExp = new RegExp("^((https?|ftp)\\:\\/\\/)?({1})((\\.)|())*\\.({2,6})(\\/?)$"); return regExp.test(str) || !str; } } }, // Функция инициализации // Создает каркас для форм init: function (_options) { var options = $.extend({}, this._defaultOptions, (_options || {})), self = this; // Если указан контейнер (или его селектор), // а так же селектор для полей, // то создаем каркас if (options.container && options.fieldSelector) { // Если есть селектор для кнопок, // то вещаем обработчик на щелчек if (options.submitSelector) { $(options.container).find(options.submitSelector).on("click", function () { if (self.isValid(options)) { // Если указан обработчик, после успешной валиадции, // то вызываем его if (typeof (options.submitHandler) === "function") options.submitHandler(); return true; } else { return false; } }); } // Если нужна проверка в режиме онлайн if (options.liveCheck) { // Проходимся по всем полям и вешаем проверку валидности $(options.container).find(options.fieldSelector).each(function (cnt, item) { $(item).on("click", function () { self.validItem($(item), options) }).on("blur", function () { self.validItem($(item), options) }).on("change", function () { self.validItem($(item), options) }).on("keyup", function () { self.validItem($(item), options) }); }); } } }, // Функция для валидации отдельного элемента validItem: function (item, _options) { var options = $.extend({}, this._defaultOptions, (_options || {})), classList = $(item).attr("class").split(/\s+/), validResult = true; // Проходимся по всем классам в атрибуте "class", // и если находим класс с именем валидатора, то вызываем его $.each(classList, function (index, cl) { // Проверка для повторяющихся полей, // имя поля, которое должно повториться указывается в атрибуте "confirm-field" if (cl === "confirmfield") { validResult &= ($(options.container).find("").val() == $(item).val()); } // Иначе обычная проверка else if (typeof (options.validators) === "function") { validResult &= options.validators(item.val()); } }); // Если поле не прошло валидацию if (!validResult) $(item).addClass(options.errorClass).removeClass(options.okClass); // Поле прошло валидацию else $(item).addClass(options.okClass).removeClass(options.errorClass); // Возвращаем результат return validResult; }, // Проверка всех полей произвольной формы isValid: function (_options) { var options = $.extend({}, this._defaultOptions, (_options || {})), validResult = true, self = this; // Если указан контейнер (или его селектор), а так же селектор для полей, // то проверяем все поля if (options.container && options.fieldSelector) { $(options.container).find(options.fieldSelector).each(function (cnt, item) { validResult &= self.validItem($(item), options); }); } // Возвращаем результат проверки return validResult; }, // Очищаем поля от всех классов стилей, которые были добавлены во время проверки clear: function (_options) { var options = $.extend(true, {}, this._defaultOptions, (_options || {})); if (options.container && options.fieldSelector) { $(options.container).find(options.fieldSelector) .removeClass(options.errorClass).removeClass(options.okClass); } } } })(window);

Тестовая страница с формами - index.html

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

$(function () { // Валидация через механизм window.validation.init({ container: ".form-1", submitHandler: function () { alert("Валидация первой формы прошла успешно!"); } }); // Ручная валидация, доступная в любой момент $(".form-2 .save-button").on("click", function () { if(window.validation.isValid({ container: ".form-2" })) { alert("Валидация второй формы прошла успешно!"); } }); });


Валидации формы в режиме реального времени Имя Email Подтверждение пароля URL Отправить форму Пример ручной валидации формы Имя Email Пароль (цифры, буквы и пробел) Подтверждение пароля URL Дата форматы ГГГГ-ММ-ДД и ДД.ММ.ГГГГ Отправить форму

Теперь, сохраняем все файлы в проекте, открываем index.html в любом браузере и переходим к первичному тестированию результата.

Смотрим результат выполнения скрипта валидации на jQuery в тестовом проекте

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

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

Теперь, убедимся, что валидация происходит в те моменты, когда это необходимо, и что формы никак не влияют друг на друга. Выглядеть это будет примерно так:

Как видно, в форма слева проводилась валидация на лету. А в форме слева валидация происходила только по нажатию на кнопку "Отправить форму."

Закончив, первичное тестирование, необходимо снова пройтись по возможностям и ограничениям составленным в самом начале:

• Форма хранится в одном произвольном контейнере . - Выполнено . Форма не зависит от конкретного элемента. Обрабатывает произвольный контейнер
• Валидация как на лету, так и вручную . - Выполнено . Валидацию можно производить как на лету, так и вручную
• Плагин должен быть простым - Выполнено . Код очень простой. Настройка форм заняла не более 5 минут. Для запуска плагина понадобилось всего пара строчек
• Можно было расширить в любое время - Выполнено . Добавление валидаторов элементарное. Можно добавить как в опции по умолчанию, так и во время запуска плагина. Так как код простой, то добавить функциональность то же просто.
• Настройка валидаторов должна быть универсальной и простой - Выполнено . Валидаторы указываются через классы стилей.

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

Думаю многие знают, что такое форма: это совокупность элементов, которые могут представлять собой текстовое поле (text), текстовое пространство (textarea), чек боксы (checkbox), радио кнопки/переключатели (radio), выпадающие списки (option), кнопки (button, submit). Эти поля посылают данные – имя/значение. Данные соответственно обрабатываются на сервере и результат возвращается пользователю. Валидация – это проверка данных заполненных полей на соответствие какому-то шаблону.

Проверка может осуществляться с помощью html5, javascript/jQuery на клиенте и также на сервере. Любое поле должно иметь атрибут ‘name’ Также input поля могут иметь атрибут ‘value’ . Если значение value заполнено, то оно будет отображаться на страничке по умолчанию. Input поля могут обрамляться тегами . Применение данного тега – является хорошим стилем программирования. Когда он используется то у input поля появляется заголовок при клике на который становится активным данный input или переключатель, а также можно назначать горячие клавиши. Есть два варианта использования: первый вариант связка for ссылающаяся на id нужного поля и второй вариант просто обрамить поле input: Имя либо Имя: Текстовое поле это или У полей с типом password вводимые символы отображаются звездочками для безопасности. Чтобы загрузить файл, используется поле Input с type=”file” Поле с галочкой – Input type=”checkbox”. Если поставить галочку, то такое поле получит атрибут “checked” Радио кнопка – Input type=”radio”, в отличии от чекбокса можно выбрать только одно значение. Для передачи значений, которые не нужно видеть юзеру, используются скрытые поля- Input type=”hidden”. Кнопка отправки формы – Input type=”submit”. Значение value будет отображаться на кнопке, например value=”click me!”. Просто кнопка – Input type=”button” или теги click me. Поле для большого куска текста – Здесь текст Поле выбора значения из выпадающего списка: Выбрать… Выбор 1 Выбор 2 Задать выбранное поле по умолчанию поможет атрибут selected. Если задать атрибут multiple то можно выбрать несколько значений: …

HTML 5 Input

Input type=”date” выводит календарь для выбора даты. Input type=”color” выводит палитру для выбора цвета. Input type=”range” выведет слайдер для выбора значения от 0 до 100%. Также появились новые атрибуты: autocomplete, placeholder, required, pattern и так далее… Контейнер для всех полей, это тег form. Его возможные параметры: Action – куда послать данные, Enctype – как браузеру воспринимать передаваемые данные, Method – метод передачи данных GET (через url) или POST (фоновая передача).

HTML 5 Валидация

HTML5 Валидация будет осуществляться самим браузером основываясь на типе поля. Например глянем на форму и увидим типы e-mail , url , number , datetime :

Email

Website

Age

Date & Time

send

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

Если добавить атрибут required : то данное поле должно быть обязательно заполнено, иначе появится предупреждение.

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

Проверить поддержку какого-то параметра браузером, можно на сайте caniuse.com

Ограничить количество вводимых символов можно свойством maxlength , например:

Параметры min/max ограничивают цифровые значения: . Также это ограничение можно присваивать датам:

Параметр multiple позволяет выбирать несколько файлов с помощью Input=”file” или делает возможным ввод нескольких емэйлов в поле Input=”email”.

Разрешить загрузку только определенных типов файлов можно указав mime-type, например только для PNG:

Или только для любых изображений:

Для mp3 и видео:

Можно также использовать регулярные выражения. Например паттерны:

Поле для ввода только слова Привет: . Если надо сделать возможность ввода Привет и привет, то меняем паттерн так: pattern=”[Пп]ривет”. И так далее. Еще примеры. Прописные буквы: + Плюс означает один или больше. Строчные и прописные +

Пример того что у нас получится можно посмотреть в примере ниже. В примере задействована и валидация на правильный ввод почты - e-mail. Ниже я покажу два варианта скриптов с проверкой правильности почты и без нее.

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

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

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

• id="file_form" - айди для нашей формы. ID - обязателен, он будет тоже использоваться в скрипте.
• - обязательный блок. Это контейнер для вывода сообщений об ошибке от скрипта. данный блок можно разместить и вне формы. Задать ему любые стили. В примере, это тот красный текст, что сообщает об незаполненном поле.
• onclick="frmotpr();" - событие, которое будет запускать функцию из нашего скрипта, при нажатии на кнопку. Данное событие добавлено к кнопке ОТПРАВИТЬ . Предпоследняя строка в коде.
• Всем полям тоже присвоены ID и классы. Они тоже понадобятся для нашего скрипта валидации. ID для поля с e-mail особенно важен для нашего будущего скрипта, что будет проверять правильность введенного e-mail.

Теперь, чтобы придать нормальный внешний вид нашей форме, добавим немного CSS стилей.Если вы будете использовать их на своем сайте, то добавьте их в свой файл стилей.

#file_form{ width:300px; background:#fff; padding:15px; margin:3px; -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px; box-shadow:0 0 10px rgba(0,0,0,.1); border:1px solid #36c; } .in_pl{ width:90%; margin-bottom:15px; padding:10px 15px; border-radius:25px; border:none; box-shadow:0 0 5px rgba(0,0,0,.2) inset; background:#fff; } .in_pl:focus{ background:#fff; } #sub_f{ padding:5px 15px; border:none; border-radius:25px; box-shadow:0 0 2px 1px rgba(0,0,0,.2); background:#36c; color:#fff; cursor:pointer; } #sub_f:hover{background:#333;} .fl_fr{ width:100%; text-align:center; font-size:15px; color:#333; cursor: pointer; border:none; margin-bottom:10px; } #messenger{ text-align:center; display:none; color:#f00; margin:15px 0; } .notvalid{background:rgba(255,0,0,.2);}

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

• #messenger - это стили для того самого блока с выводом сообщений. Главный параметр для этого класса - это display:none. Тоесть мы изначально скрываем блок.
• .notvalid - это стили для класса, который будет присваиваться нашим скриптом к тому полю, что не заполнено или заполнено не корректно. Об этом классе я еще раз упомяну ниже.

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

Так как наш скрипт работает с помощью jQuery , нужно чтобы была подключена библиотека jQuery. Если она не подключена ранее, сделайте это, добавив вот такую строку:

Куда и как правильнее добавлять библиотеку, вы можете прочитать в статье - .

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

"Дейл"), array("name" => "required|min:5"));

Первый параметр, передаваемый методу make - данные для проверки. Второй параметр - правила, которые к ним должны быть применены.

Использование массивов для указания правил

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

$validator = Validator::make(array("name" => "Дейл"), array("name" => array("required", "min:5")));

Проверка нескольких полей $validator = Validator::make(array("name" => "Дейл", "password" => "плохойпароль", "email" => "[email protected]"), array("name" => "required", "password" => "required|min:8", "email" => "required|email|unique"));

Как только был создан экземпляр Validator , метод fails (или passes) может быть использован для проведения проверки.

If ($validator->fails()) { // Переданные данные не прошли проверку }

Если Validator нашёл ошибки, вы можете получить его сообщения таким образом:

$messages = $validator->messages();

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

$failed = $validator->failed();

Проверка файлов

Класс Validator содержит несколько изначальных правил для проверки файлов, такие как size , mimes и другие. Для выполнения проверки над файлами просто передайте эти файлы вместе с другими данными.

Хук после валидации

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

$validator = Validator::make(...); $validator->after(function($validator) { if ($this->somethingElseIsInvalid()) { $validator->errors()->add("field", "Something is wrong with this field!"); } }); if ($validator->fails()) { // }

Вы можете добавить несколько after , если это нужно.

Валидация в контроллерах

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

Базовый контроллер App\Http\Controllers\Controller включает в себя трейт ValidatesRequests , который уже содержит методы для валидации:

/** * Сохранить пост в блоге. * * @param Request $request * @return Response */ public function store(Request $request) { $this->validate($request, [ "title" => "required|unique|max:255", "body" => "required", ]); // }

Если валидация проходит, код продолжает выполняться. Если нет - бросается исключение Illuminate\Contracts\Validation\ValidationException . Если вы не поймаете это исключение, его поймает фреймворк, заполнит flash-переменные сообщениями об ошибках валидации и средиректит пользователя на предыдущую страницу с формой - сам!

В случае AJAX-запроса редиректа не происходит, фреймворк отдает ответ с HTTP-кодом 422 и JSON с ошибками валидации.

Код, приведенный выше, аналогичен вот этому::

/** * Сохранить пост в блоге. * * @param Request $request * @return Response */ public function store(Request $request) { $v = Validator::make($request->all(), [ "title" => "required|unique|max:255", "body" => "required", ]); if ($v->fails()) { return redirect()->back()->withErrors($v->errors()); } // }

Изменения формата ошибок

Если вы хотите кастомизировать сообщения об ошибках валидации, которые сохраняются во флэш-переменных сессии при редиректе, перекройте метод formatValidationErrors в вашем контроллере:

/** * {@inheritdoc} */ protected function formatValidationErrors(\Illuminate\Validation\Validator $validator) { return $validator->errors()->all(); } Валидация запросов

Для реализации более сложных сценариев валидации вам могут быть удобны так называемые Form Requests. Это специальные классы HTTP-запроса, содержащие в себе логику валидации. Они обрабатывают запрос до того, как он поступит в контроллер.

Чтобы создать класс запроса, используйте artisan-команду make:request:

Php artisan make:request StoreBlogPostRequest

Класс будет создан в папке app/Http/Requests . Добавьте необходимые правила валидации в его метод rules:

/** * Get the validation rules that apply to the request. * * @return array */ public function rules() { return [ "title" => "required|unique|max:255", "body" => "required", ]; }

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

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

В случае неудачной валидации фреймворк заполняет флэш-переменные ошибками валидации и возврашает редирект на предыдущую страницу. В случае AJAX-запроса отдается ответ с кодом 422 и JSON с ошибками валидации.

Контроль доступа

Классы Form Request также содержат метод authorize . В этом методе вы можете проверять, разрешено ли пользователю совершать это действие, обновлять данный ресурс. Например, если пользователь пытается отредактировать комментарий к посту, является ли он его автором?

/** * Determine if the user is authorized to make this request. * * @return bool */ public function authorize() { $commentId = $this->route("comment"); return Comment::where("id", $commentId) ->where("user_id", Auth::id())->exists(); }

Обратите внимание на вызов метода route() выше. Этод метод дает вам доступ к параметрам в урле (в данном случае это {comment}), определенным в роуте:

Route::post("comment/{comment}");

Если метод authorize возвращает false, фреймворк формирует ответ с HTTP-кодом 403 и сразу же отсылает его. Метод контроллера не выполняется.

/** * Determine if the user is authorized to make this request. * * @return bool */ public function authorize() { return true; }

Изменения формата ошибок во флэш-переменных

Если вы хотите кастомизировать сообщения об ошибках валидации, которые сохраняются во флэш-переменных сессии при редиректе, переопределите метод formatValidationErrors в базовом классе запросов (App\Http\Requests\Request):

/** * {@inheritdoc} */ protected function formatValidationErrors(\Illuminate\Validation\Validator $validator) { return $validator->errors()->all(); } Работа с сообщениями об ошибках

После вызова метода messages объекта Validator вы получите объект MessageBag , который имеет набор полезных методов для доступа к сообщениям об ошибках.

Получение первого сообщения для поля echo $messages->first("email"); Получение всех сообщений для одного поля foreach ($messages->get("email") as $message) { // } Получение всех сообщений для всех полей foreach ($messages->all() as $message) { // } Проверка на наличие сообщения для поля if ($messages->has("email")) { // } Получение ошибки в заданном формате echo $messages->first("email", "");

Примечание: по умолчанию сообщения форматируются в вид, который подходит для Twitter Bootstrap.

Получение всех сообщений в заданном формате foreach ($messages->all("

:message

") as $message) { // } Ошибки и шаблоны

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

Route::get("register", function() { return View::make("user.register"); }); Route::post("register", function() { $rules = array(...); $validator = Validator::make(Input::all(), $rules); if ($validator->fails()) { return redirect("register")->withErrors($validator); } });

Заметьте, что когда проверки не пройдены, мы передаём объект Validator объекту переадресации Redirect с помощью метода withErrors . Этот метод сохранит сообщения об ошибках в одноразовых flash-переменных сессии, таким образом делая их доступными для следующего запроса.

Однако, заметьте, мы не передаем в View::make("user.register"); переменные $errors в шаблон. Laravel сам проверяет данные сессии на наличие переменных и автоматически передает их шаблону, если они доступны. Таким образом, важно помнить, что переменная $errors будет доступна для всех ваших шаблонов всегда, при любом запросе. . Это позволяет вам считать, что переменная $errors всегда определена и может безопасно использоваться. Переменная $errors - экземпляр класса MessageBag .

Таким образом, после переадресации вы можете прибегнуть к автоматически установленной в шаблоне переменной $errors:

Именованные MessageBag

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

Return redirect("register")->withErrors($validator, "login");

Получить текст ошибки из MessageBag с именем login:

Правила проверки

Ниже список всех доступных правил и их функции:

accepted

Поле должно быть в значении yes , on или 1 . Это полезно для проверки принятия правил и лицензий.

active_url

Поле должно быть корректным URL, доступным через функцию checkdnsrr .

after:date

Поле должно быть датой, более поздней, чем date

alpha

Поле должно содержать только алфавитные символы.

alpha_dash

Поле должно содержать только алфавитные символы, цифры, знаки подчёркивания (_) и дефисы (-).

alpha_num

Поле должно содержать только алфавитные символы и цифры.

array

Поле должно быть массивом.

before:date

Поле должно быть датой, более ранней, чем date . Строки приводятся к датам функцией strtotime .

between:min ,max

Поле должно иметь размер в диапазоне от min до max . Строки, числа и файлы трактуются аналогично правилу size .

boolean

Поле должно быть логическим (булевым). Разрешенные значения: true , false , 1 , 0 , "1" и "0" .

confirmed

Значение поля должно соответствовать значению поля с этим именем, плюс foo_confirmation . Например, если проверяется поле password , то на вход должно быть передано совпадающее по значению поле password_confirmation .

date

Поле должно быть правильной датой в соответствии с функцией strtotime .

date_format:format

Поле должно подходить под формат даты format в соответствии с функцией date_parse_from_format .

different:field

Значение проверяемого поля должно отличаться от значения поля field .

email

Поле должно быть корректным адресом e-mail.

exists:table ,column

Поле должно существовать в заданной таблице базе данных.

Простое использование:

"state" => "exists:states"

Указание имени поля в таблице:

"state" => "exists:states,abbreviation"

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

"email" => "exists:staff,email,account_id,1"

image

Загруженный файл должен быть изображением в формате jpeg, png, bmp, gif или svg.

in:foo ,bar ,...

Значение поля должно быть одним из перечисленных (foo , bar и т.д.).

integer

Поле должно иметь корректное целочисленное значение.

ip

Поле должно быть корректным IP-адресом.

max:value

Значение поля должно быть меньше или равно value

mimes:foo ,bar ,...

MIME-тип загруженного файла должен быть одним из перечисленных.

Простое использование:

"photo" => "mimes:jpeg,bmp,png"

min:value

Значение поля должно быть более value . Строки, числа и файлы трактуются аналогично правилу .

not_in:foo ,bar ,...

Значение поля не должно быть одним из перечисленных (foo , bar и т.д.).

numeric

Поле должно иметь корректное числовое или дробное значение.

regex:pattern

Поле должно соответствовать заданному регулярному выражению.

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

required

Проверяемое поле должно присутствовать и иметь непустое значение.

required_if:field ,value ,...

Проверяемое поле должно присутствовать и иметь непустое значение, если другое поле field присутствует и имеет любое из значений value .

required_with:foo ,bar ,...

Присутствует и имеет непустое значение хотя бы одно из перечисленных полей (foo , bar и т.д.).

required_with_all:foo ,bar ,...

Проверяемое поле должно присутствовать и иметь непустое значение, но только если присутствуют и имеют непустое значение все перечисленные поля (foo , bar и т.д.).

required_without:foo ,bar ,...

Проверяемое поле должно присутствовать и иметь непустое значение, но только если не присутствует или имеет пустое значение хотя бы одно из перечисленных полей (foo , bar и т.д.).

required_without_all:foo ,bar ,...

Проверяемое поле должно присутствовать и иметь непустое значение, но только если не присутствуют или имеют пустые значения все перечисленные поля (foo , bar и т.д.).

same:field

Поле должно иметь то же значение, что и поле field .

size:value

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

timezone

Поле должно содержать идентификатор часового пояса (таймзоны), один из перечисленных в php-функции timezone_identifiers_list

unique:table ,column ,except ,idColumn

Значение поля должно быть уникальным в заданной таблице базы данных. Если column не указано, то будет использовано имя поля.

Простое использование "email" => "unique:users" Указание имени поля в таблице "email" => "unique:users,email_address" Игнорирование определённого ID "email" => "unique:users,email_address,10" Добавление дополнительных условий

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

"email" => "unique:users,email_address,NULL,id,account_id,1"

В правиле выше только строки с account_id равном 1 будут включены в проверку.

url

Поле должно быть корректным URL.

Примечание: используется PHP-функция filter_var

Условные правила

Иногда вам нужно валидировать некое поле только тогда, когда оно присутствует во входных данных. Для этого добавьте правило sometimes:

$v = Validator::make($data, array("email" => "sometimes|required|email",));

В примере выше для поля email будет запущена валидация только когда $data["email"] существует.

Сложные условные правила

Иногда вам нужно, чтобы поле имело какое-либо значение только если другое поле имеет значеие, скажем, больше 100. Или вы можете требовать наличия двух полей, только когда также указано третье. Это легко достигается условными правилами. Сперва создайте объект Validator с набором статичных правил, которые никогда не изменяются:

$v = Validator::make($data, array("email" => "required|email", "games" => "required|numeric",));

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

$v->sometimes("reason", "required|max:500", function($input) { return $input->games >= 100; });

Первый параметр этого метода - имя поля, которое мы проверяем. Второй параметр - правило, которое мы хотим добавить, если переданная функция-замыкание (третий параметр) вернёт true . Этот метод позволяет легко создавать сложные правила проверки ввода. Вы можете даже добавлять одни и те же условные правила для нескольких полей одновременно:

$v->sometimes(array("reason", "cost"), "required", function($input) { return $input->games >= 100; });

Примечание: Параметр $input , передаваемый замыканию - объект Illuminate\Support\Fluent и может использоваться для чтения проверяемого ввода и файлов.

Собственные сообщения об ошибках

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

Передача своих сообщений в Validator $messages = array("required" => "Поле:attribute должно быть заполнено.",); $validator = Validator::make($input, $rules, $messages);

Примечание: строка:attribute будет заменена на имя проверяемого поля. Вы также можете использовать и другие строки-переменные.

Использование других переменных-строк $messages = array("same" => "Значения:attribute и:other должны совпадать.", "size" => "Поле:attribute должно быть равно exactly:size.", "between" => "Значение:attribute должно быть от:min и до:max.", "in" => "Поле:attribute должно иметь одно из следующих значений: :values",); Указание собственного сообщения для отдельного поля

Иногда вам может потребоваться указать своё сообщение для отдельного поля.

$messages = array("email.required" => "Нам нужно знать ваш e-mail адрес!",);

Указание собственных сообщений в файле локализации

Также можно определять сообщения валидации в файле локализации вместо того, чтобы передавать их в Validator напрямую. Для этого добавьте сообщения в массив custom файла локализации app/lang/xx/validation.php .

"custom" => array("email" => array("required" => "Нам нужно знать ваш e-mail адрес!",),),

Собственные правила проверки Регистрация собственного правила валидации

Laravel изначально содержит множество полезных правил, однако вам может понадобиться создать собственные. Одним из способов зарегистрировать произвольное правило - через метод Validator::extend .

Validator::extend("foo", function($attribute, $value, $parameters) { return $value == "foo"; });

Примечание: имя правила должно быть в формате_с_подчёркиваниями.

Переданная функция-замыкание получает три параметра: имя проверяемого поля $attribute , значение поля $value и массив параметров $parameters , переданных правилу.

Вместо функции в метод extend можно передать ссылку на метод класса:

Validator::extend("foo", "FooValidator@validate");

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

Расширение класса Validator

Вместо использования функций-замыканий для расширения набора доступных правил вы можете расширить сам класс Validator . Для этого создайте класс, который наследует Illuminate\Validation\Validator . Вы можете добавить новые методы проверок, начав их имя с validate .