jQuery.validate и веб-формы 1С-Битрикс

Введение или несколько слов о jQuery.validate

Для начала несколько слов о плагине jQuery.validate, чтобы те читатели, которые не сталкивались с ним, имели представление. Итак, этот плагин позволяет проводить валидацию полей веб-форм на стороне клиента. В него включен целый набор методов проверки различных типов полей форм, например, таких как: e-mail, url и других. Если в процессе проверки поле не проходит валидацию выводится сообщение об ошибке, и форма не отправляется. Сообщения об ошибках переведены на 37 различных языков, в том числе и русский.

Скачать плагин можно на официальном сайте .

У плагина есть метод validate, который и делает всю работу. В коде вызова плагина вместе с остальными настройками (о которых вы можете узнать на официальном сайте в разделе Documentation) методу validate передаются 2 объекта: rules и messages. В объекте rules методу передаются пары «ключ/значение», описывающие правила проверки полей. В качестве ключа передается имя элемента формы (или группы элементов, в случае если это флажки), а в качестве значения - объект с параметрами.

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

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

JavaScript

$('#my_form').validate({
	focusInvalid: false,
	focusCleanup: true,
	submitHandler: function(form) {
		form.submit();
	},
	rules:{
		fio: {
			required: true
		},
		phone: {
			required: true
		},
		email: {
			required: true,
		}
	},
	messages:{
		fio: {
			required: 'Поле Ф.И.О. обязательно для заполнения',
			minlength: 2
		},
		phone: {
			required: 'Поле телефон не заполнено, пример +7(495)222-22-22',
			minlength: 2
		},
		email: {
			required: 'Поле email не заполнено',
		},
	},
  }
});

Пишем функции для формирования правил (rules) и сообщений (messages)

Немного забегу вперед и сообщу читателю, что вызывать jQuery.validate мы будет в файле template.php шаблона компонента bitrix:form.result.new. Поля формы внутри компонента доступны из массива $arResult. В процессе работы шаблона во время подключения плагина jQuery.validate, мы создадим цикл, в котором будем обходить все элементы массива (поля) и проверять, должно ли поле проходить валидацию. Если да, то добавлять информацию о нем в объект rules, а текст сообщения об ошибке в объект messages. Для этого нужно создать 2 функции, которые и будут все это проверять. Первая из функций будет проверять, обязательное ли поле для заполнения или нет, а вторая сохранять в message сообщения, которые будут показаны в случае возникновения ошибки в различных элементах формы.

Функция №1 – GetValidateRules

PHP

function GetValidateRules($type, $req) {
	switch($type) {
		case 'NAME':
			echo "required: ".($req=="Y"?"true":"false")."\r\n";
			break;
		case 'REQUIRED':
			echo "required: ".($req=="Y"?"true":"false")."\r\n";
			break;
		case 'PHONE':
			echo "required: ".($req=="Y"?"true":"false")."\r\n";
			break;
		case 'EMAIL':
			echo "required: ".($req=="Y"?"true":"false").",\r\n";
			break;
           case 'MESSAGE':
			echo "required: ".($req=="Y"?"true":"false").",\r\n";
			break;
		default: echo "required: false\r\n";
	}
}

Функция №2 – GetValidateMessages

PHP

function GetValidateMessages($type) {
	switch($type) {
		case 'NAME':
			echo "required: 'Поле Ф.И.О. обязательно для заполнения',\r\n";
			echo "minlength: 2\r\n";
			break;
		case 'REQUIRED':
			echo "required: 'Поле обязательно для заполнения',\r\n";
			echo "minlength: 1\r\n";
			break;
		case 'PHONE':
			echo "required: 'Поле телефон не заполнено, пример +7(495)222-22-22',\r\n";
			echo "minlength: 2\r\n";
			break;
		case 'EMAIL':
			echo "required: 'Поле email не заполнено',\r\n";
			break;
           case 'MESSAGE':
 	           echo "required: 'Поле вопросы не заполнено,\r\n";
 	           echo "minlength: 3\r\n";
	           break;
		default: echo "required: 'Обязательное поля для заполнения'\r\n";
	}
}

Эти функции необходимо разместить внутри файла init.php (/bitrix/php_interface/).

Добавляем метки в поля веб-форм

После установки на демо-сайте существует 2 формы. В этой статье я буду работать с веб-формой «Обратная связь». В ней обязательными полями являются четыре: Имя, E-mail и Телефон и Ваши вопросы. Этого будет вполне достаточно, чтобы продемонстрировать работу плагина jQuery.validate.

Для начала нужно «пометить» эти поля для валидации. Для этого заходим в настройки формы «Обратная связь», а именно в раздел, где хранятся вопросы формы. Зайдем в настройки вопроса «Имя» и откроем закладку «Комментарии». Введем в него значение NAME.

В остальные поля (E-mail, Телефон и Ваши вопросы) введем соответственно значения EMAIL, PHONE и MESSAGE. Как вы могли заметить мы используем значения, которые упоминаются в функциях GetValidateRules и GetValidateMessages.

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

Размещаем и кастомизируем шаблон компонента bitrix:form.result.new

Переходим к основным действиям. Откроем на демо-сайте страницу «Обратная связь» (/communication/web-forms/feedback/). На ней размещен компонент bitrix:form.result.new с нашей веб-формой. Перед тем как вносить изменения нам нужно скопировать шаблон этого компонента. Я скопирую его в шаблон сайта по-умолчанию (.default) с именем validate. Таким образом файлы шаблона будут доступны в папке /bitrix/templates/.default/components/bitrix/form.result.new/validate/. Далее в статье я не буду указывать полный путь, когда буду описывать действия над файлами в этой папке.

Давайте ознакомимся с массивом $arResult, который выводится в шаблоне. Нам же нужно знать, как обращаться к данным, которые мы сохранили в поле «Комментарий» настроек полей веб-формы. Для этого в файле template.php выведем массив с помощью print_r(). Вызовем эту функцию в начале шаблона. В массиве $arResult[“arQuestions”] хранится информация о вопросах нашей веб-формы. Проверьте элементы массива COMMENT у вопросов NAME, PHONE, EMAIL и QUESTIONS: они должны быть заполнены значениями, которые мы указали в настройках вопросов в админке.

Далее нужно разместить jQuery.validate в шаблоне сайта. Скачайте архив с плагином по ссылке указанной в начале статьи, разархивируйте его и скопируйте файл jquery.validate.js в папку шаблона сайта. Я, например, разместил файл в дефолтном шаблоне в папке js (/bitrix/templates/.default/js/).

Подключим плагин. Для этого создайте в папке шаблона файл component_epilog.php со следующим кодом.

PHP

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
   // подключаем jQuery, если не подключен в шаблоне сайта 
  CJSCore::Init(array("jquery"));
  $APPLICATION->AddHeadString('<script type="text/javascript" src="/bitrix/templates/.default/js/jquery.validate.js"></script>',true);
?>

Добавляем в template.php PHP код, который будет формировать JS для вызова плагина jQuery.validate. Для обеспечения корректной работы плагина не следует забывать о подключении jQuery, а также о том, что подключение плагина следует делать после подключения jQuery.

PHP

<script type="text/javascript">
    $(function(){
	/*jQuery.validate*/
	var f = $('form[name="<?=$arResult["arForm"]["SID"]?>"]');
	f.validate({
		focusInvalid: false,
		focusCleanup: true,
		submitHandler: function(form) {
			form.submit();
		},
		rules:{
			<?foreach($arResult["QUESTIONS"] as $FIELD_SID => $q):?>
			form_<?=$q['STRUCTURE'][0]['FIELD_TYPE']?>_<?=$q['STRUCTURE'][0]['ID']?>: {
				<?GetValidateRules($arResult["arQuestions"][$FIELD_SID]["COMMENTS"], $q["REQUIRED"])?>
			},
			<?endforeach;?>
		},
		messages:{
			<?foreach($arResult["QUESTIONS"] as $FIELD_SID => $q):?>
			form_<?=$q['STRUCTURE'][0]['FIELD_TYPE']?>_<?=$q['STRUCTURE'][0]['ID']?>: {
				<?GetValidateMessages($arResult["arQuestions"][$FIELD_SID]["COMMENTS"])?>
		},
			<?endforeach;?>
		},
		errorPlacement: function(error, element) {
			var erspan = $('<span class="error">'+error.text()+'</span>');
                  element.parent().append(erspan);
           }
	});
	/*jQuery.validate*/
	// hide error
	$('input', '.text').focus(function() {
		$(this).next('span.error').remove();
	});
  })
</script>

Основной момент, на который нужно обратить внимание в этом коде – это 2 цикла, которые формируют JS-объекты rules и messages на основе информации о вопросах и структуре веб-формы из массива $arResult. Код, расположенный выше объектов rules и messages – это передача параметров плагину, сразу после объектов расположена функция errorPlacement - в ней можно описать положение HTML-элементов в которых будут отображаться сообщения об ошибках. В случае нашей веб-формы я решил разместить их внутри элементов <span> и расположить эти элементы рядом с полями, в которых обнаружатся ошибки. В самом низу находится обработчик события focus полей веб-формы. Он нужен для того, чтобы скрывать сообщения об ошибках в момент, когда посетитель ставит курсор в поле с ошибочными данными.

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

Ну вот практически все готово. Осталось только добавить несколько CSS-правил для оформления внешнего вида span’ов с сообщениями об ошибках.

Добавляем CSS стили

Откроем файл style.css и добавим в него следующее CSS-правило:

CSS

span.error{
	margin-left:15px;
	background: linear-gradient(to bottom, #F34747 0%, #F02E2B 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
	border: 1px solid #A83737;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.18);
	color: #FFFFFF;	
	border-radius: 3px;
	text-shadow: 0 1px #8A2D14;
	padding:3px;
	vertical-align: top;	
}

Этот код оформит элементы с сообщениями об ошибках так, как показано на рисунке ниже.

Заключение

Ну вот, собственно, и все. Мы подключили плагин jQuery.validate в шаблон компонента bitrix:form.result.new на сайте под управлением «1C-Битрикс».

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

Скачать код шаблона validate.