Валидатор HTML-форм

Вступление

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

Каждый раз, прибегая к созданию HTML-формы, мы приходим к тому, что необходимо проверить введенные в неё данные, предпочтительно, до момента её отправки. И замучившись каждый раз что-то для этого придумывать, мы решили сделать для нас свой собственный обработчик, который может быть полезен многим другим. Мы не претендуем на славу jQuery Validation Plugin. Просто, он сам по себе нам не очень подходит. Всё равно приходится добавлять что-то своё.

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

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

Технические требования для подключения

1. Подключенная к вашему сайту библиотека jQuery. Какой версии? А фиг его знает. Вот у нас, например, подключена 3.4.1. И с ней всё работает нормально. Проверяли на версии 3.3.1. Тоже всё нормально. Хотите попробовать на версиях старше... или вообще на первых версиях jQuery? Ну, а вы точно уверены в том, что вам нужен наш обработчик-валидатор форм?
2. Использование Bootstrap версии не ниже 4. Формируя самим себе техническое задание на разработку валидатора-обработчика, мы пришли к тому, что он должен будет одинаково хорошо работать и на страницах с подключенным Bootstrap, и без такого. Но, пока что, до конца не реализовали поддержку «безбустрапной» разметки страницы. Поэтому, если вы используете Bootstrap 4 или 5 версии, хорошо. Если нет, а вы точно уверены в том, что вам нужен наш обработчик-валидатор форм?
3. В вашем браузере должна быть включена поддержка JavaScript.

Форма-образец для подключения обработчика

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

HTML-разметра формы в примере составлена с оглядкой на документацию к Bootstrap 4.

<div class="example-form-validation-wrapper my-3">
	<div class="mb-3 alert alert-info">
		Поля, отмеченные символом <span class="required"></span>, обязательны для заполнения
	</div>
	<form action="" method="post" autocomplete="off" id="example-form-validation" name="example-form-validation">
		<div class="row">
			<div class="col-md-6 mb-3">
				<div class="form-group">
					<label for="exmp-login">Ваш логин</label>
					<input type="text" class="form-control" name="login" id="exmp-login" placeholder="Придумайте себе логин" />
				</div>
			</div>
			<div class="col-md-6 mb-3">
				<div class="form-group">
					<label for="exmp-email">Ваша электропочта</label>
					<input type="email" class="form-control" name="email" id="exmp-email" placeholder="Укажите ваш действительный адрес электропочты" />
				</div>
			</div>
			<div class="col-md-6 mb-3">
				<div class="form-group">
					<label for="exmp-password">Ваш пароль</label>
					<input type="password" class="form-control" name="passsword" id="exmp-password" placeholder="Придумайте себе пароль" />
				</div>
			</div>
			<div class="col-md-6 mb-3">
				<div class="form-group">
					<label for="exmp-password2">Подтвердите пароль</label>
					<input type="password" class="form-control" name="password2" id="exmp-password2" placeholder="Повторите ввод вашего пароля" />
				</div>
			</div>
			<div class="col-md-6 mb-3">
				<div class="form-group">
					<label for="exmp-surname">Ваша фамилия</label>
					<input type="text" class="form-control" name="surname" id="exmp-surname" placeholder="Напишите вашу фамилию" />
				</div>
			</div>
			<div class="col-md-6 mb-3">
				<div class="form-group">
					<label for="exmp-name">Ваше имя</label>
					<input type="text" class="form-control" name="name" id="exmp-name" placeholder="Напишите ваше имя" />
				</div>
			</div>
			<div class="col-md-6 mb-3">
				<div class="form-group">
					<label for="exmp-patronymic">Ваше отчество</label>
					<input type="text" class="form-control" name="patronymic" id="exmp-patronymic" placeholder="Напишите ваше отчество" />
				</div>
			</div>
			<div class="col-md-6 mb-3">
				<div class="form-group">
					<label for="exmp-bdate">Дата рождения</label>
					<input type="date" class="form-control" name="bdate" id="exmp-bdate" placeholder="Укажите дату вашего рождения" />
				</div>
			</div>
			<div class="col-md-6 mb-3">
				<div class="form-group">
					<label for="exmp-phone">Ваш номер телефона</label>
					<input type="tel" class="form-control" name="phone" id="exmp-phone" placeholder="Укажите ваш контактный номер телефона" />
				</div>
			</div>
			<div class="col-md-6 mb-3">
				<div class="form-group">
					<label for="exmp-country">Страна</label>
					<select class="custom-select" name="country" id="exmp-country">
						<option value="0">Выберите из списка</option>
						<option value="1">Россия</option>
					</select>
				</div>
			</div>
			<div class="col-md-6 mb-3">
				<div class="form-group">
					<label for="exmp-region">Регион</label>
					<select class="custom-select" name="region" id="exmp-region">
						<option value="0">Выберите из списка</option>
						<option value="61">Ростовская область</option>
					</select>
				</div>
			</div>
			<div class="col-md-6 mb-3">
				<div class="form-group">
					<label for="exmp-city">Населенный пункт</label>
					<select class="custom-select" name="city" id="exmp-city">
						<option value="0">Выберите из списка</option>
						<option value="1">Ростов-на-Дону</option>
						<option value="2">Таганрог</option>
					</select>
				</div>
			</div>
			<div class="col-md-6 mb-3">
				<div class="form-group">
					<label for="exmp-postcode">Индекс</label>
					<input type="number" class="form-control" name="postcode" id="exmp-postcode" placeholder="Ваш почтовый индекс" />
				</div>
			</div>
			<div class="col-md-6 mb-3">
				<div class="form-group">
					<label for="exmp-address">Адрес</label>
					<input type="text" class="form-control" name="address" id="exmp-address" placeholder="Напишите ваш адрес" />
				</div>
			</div>
			<div class="col-12 mb-3">
				<div class="form-group">
					<label for="exmp-info">Информация о себе</label>
					<textarea class="form-control" name="info" id="exmp-info" rows="7"></textarea>
				</div>
			</div>
			<div class="col-md-6 mb-3">
				<div class="form-group">
					<label for="exmp-image">Выберите изображение для своего аватара</label>
					<!-- image/jpg, image/jpeg, image/gif, image/png -->
					<input type="file" class="form-control-file" name="file" id="exmp-file" />
				</div>
			</div>
			<div class="col-12 mb-3">
				<div class="form-group">
					<label for="exmp-g-recaptcha-response">Вы робот?</label>
					<div class="g-recaptcha" data-index="" data-sitekey="6Le_ldsZAAAAAA6lXEE8HoUWu2w_FKZnlzzmFTVN" data-theme="dark"></div>
				</div>
			</div>
			<div class="col-md-6 mb-3">
				<div class="btn-group">
					<input type="submit" class="btn btn-success" role="button" name="apply" value="Сохранить" />
					<input type="reset" class="btn btn-danger" role="button" name="reset" value="Очистить" />
					<button type="button" class="btn btn-outline-danger" onclick="grecaptcha.reset($(this.form).find('.g-recaptcha').attr('data-index'))">Обновить капчу</button>
				</div>
			</div>
		</div>
	</form>
</div>

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

Подключение обработчика к форме

Итак, чтобы подключить валидатор-обработчик форм, нужно у jQuery-объекта с формой вызвать метод formValidate(), передав ему в качестве аргумента объект с основными настройками.

$("#example-form-validation").formValidate({
					
	// Мы используем капчу для нашей формы
	useCaptcha: true,
	// Мы используем Google reCAPTCHA
	googleRecaptchaSelector: ".g-recaptcha-response",
	// Мы используем TwitterBootstrap
	useTwitterBootstrap: true,
	// Мы используем четвертую версию TwitterBootstrap
	twitterBootstrapVersion: 4,
	// Поля в фокусе и поля под курсором мыши будут подсвечиваться
	fieldFocusedClassName: "bg-field-focus",
	fieldHoveredClassName: "bg-field-hover",
	// Мы не будем использовать поле для общих сообщений пользователю, расположенное над формой
	useElementAboveForm: false,
	
});

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

$.extend({
				
	exampleFormValidation: $("#example-form-validation").formValidate({
		
		// Мы используем капчу для нашей формы
		useCaptcha: true,
		// Мы используем Google reCAPTCHA
		googleRecaptchaSelector: ".g-recaptcha-response",
		// Мы используем TwitterBootstrap
		useTwitterBootstrap: true,
		// Мы используем четвертую версию TwitterBootstrap
		twitterBootstrapVersion: 4,
		// Поля в фокусе и поля под курсором мыши будут подсвечиваться
		fieldFocusedClassName: "bg-field-focus",
		fieldHoveredClassName: "bg-field-hover",
		// Мы не будем использовать поле для общих сообщений пользователю, расположенное над формой
		useElementAboveForm: false,
		
	})
	
});

Теперь для обращения к нашему обработчику мы можем использовать объект jQuery $.exampleFormValidation. И можем делать это и в своих JS-сценариях, и в консоли JavaScript браузера.

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

Передаем обработчику параметры полей формы

$.exampleFormValidation.formValidate("fields", {
	
	// Логин пользователя
	login: {
		// Значение атрибута ID поля формы
		id: "exmp-login",
		// Поле формы будет обязательным для заполнения
		required: true,
		// Указываем текст сообщения об ошибке для поля, если оно будет заполнено неверно
		message: "Недопустимые символы в логине",
		// Указываем шаблон регулярного выражения, по которому будет проверяться правильность введенного в поле значения
		// Мы сослались на сохраненный внутри валидатора-обработчика шаблон регулярного выражения для поля логина, но вы здесь можете указывать свой собственный шаблон
		pattern: $.fn.formValidate.defaults.patterns.login,
		// Этим параметром мы говорим обработчику о том, что у поля будет подсказка, и передаем, даже, её текст в виде строки
		helpText: "Логин может состоять только из символов латинского алфавита и цифр. Первым символом логина должны быть символ латинского алфавита или цифра. В логине вы можете использовать символы: . _ -",
		// Параметром errorText мы указываем обработчику необходимость использования сообщений об ошибках для поля
		errorText: true,
		// Указываем ограничения минимальной и максимальной длин введенного значения для поля
		min:3,
		max: 32
	},
	// Пароль пользователя
	password: {
		id: "exmp-password",
		// Как и логин, это поле является обязательным для заполнения
		required: true,
		// В форме будет присутствовать поле для подтверждения введенного пароля
		// Чтобы наш обработчик понял это, мы указываем значение атрибута ID этого поля
		passwordApprove: "exmp-password2",
		// Передаем шаблон регулярного выражения для проверки корректности пароля, вы можете использовать свой шаблон
		pattern: $.fn.formValidate.defaults.patterns.password,
		// Подсказка для поля воода пароля
		helpText: "Пароль может состоять из символов латинского алфавита, цифр и символов: . _ - ~ ` ! @ # $ % * ) ( ] [ } { ; : ' \" , < >. В пароле обязательно должны быть: как минимум одна цифра, как минимум одна заглавная буква.",
		// Необходимость использования сообщений об ошибке
		errorText: true,
		// Ограничения для длины введенного значения в поле
		min: 6,
		max: 16
	},
	// Электропочта пользователя
	email: {
		id: "exmp-email",
		required: true,
		message: "Недопустимый формат адрес электронной почты",
		pattern: $.fn.formValidate.defaults.patterns.email,
		helpText: "Напишите ваш действительный адрес электропочты, на который после регистрации будет отправлено письмо с дальнейшими инструкциями по активации учетной записи",
		errorText: true,
		min: 6,
		max: 64
	},
	// Имя пользователя
	name: {
		id: "exmp-name",
		required: true,
		message: "Недопустимые символы в введенном значении имени",
		pattern: $.fn.formValidate.defaults.patterns.name,
		helpText: true,
		errorText: true,
		min: 3,
		max: 32
	},
	// Фамилия пользователя
	// Это поле — первое из перечисленных, не являющееся обязательным к заполнению. Мы просто опускаем здесь параметр required
	surname: {
		id: "exmp-surname",
		message: "Недопустимые символы в введенном значении фамилии",
		pattern: $.fn.formValidate.defaults.patterns.name,
		// Подсказка у поля просто должна быть, а вот её текст мы не указываем
		helpText: true,
		errorText: true,
		min: 3,
		max: 32
	},
	// Отчество пользователя
	patronymic: {
		id: "exmp-patronymic",
		message: "Недопустимые символы в введенном значении отчества",
		pattern: $.fn.formValidate.defaults.patterns.name,
		helpText: true,
		errorText: true,
		min: 3,
		max: 32
	},
	// Дата рождения пользователя
	bdate: {
		id: "exmp-bdate",
		message: "Зарегистрироваться могут только совершеннолетние пользователи",
		// Это поле отличается от предыдущих тем, что является вводом даты в формате ДД.ММ.ГГГГ
		// Обработчик проверит соответствие введенного значения нужному формату
		date: true,
		// Параметр, который проверит введенную дату на факт её 18-летнего отставания от текущей даты. Например, для регистрации только совершеннолетних пользователей
		majorityCheck: true,
		helpText: "Выберите дату вашего рождения",
		errorText: true,
	},
	// Номер контактного телефона
	phone: {
		id: "exmp-phone",
		required: true,
		message: "Недопустимый формат телефонного номера",
		pattern: $.fn.formValidate.defaults.patterns.phone,
		helpText: "Укажите номер вашего контактного телефона: 79198889977 — для мобильного, 8632544433 — для городского",
		errorText: true,
	},
	// Страна пользователя
	country: {
		id: "exmp-country",
		required: true,
		// Говорим обработчику, что он имеет дело с полем списка
		type: "select",
		// И сообщаем обработчику, что в этом поле обязательно должно быть выбрано значение
		selected: true,
		message: "Выберите значение из предложенного списка",
		errorText: true,
	},
	// Регион пользователя
	region: {
		id: "exmp-region",
		required: true,
		type: "select",
		selected: true,
		message: "Выберите значение из предложенного списка",
		errorText: true,
	},
	// Город пользователя
	city: {
		id: "exmp-city",
		required: true,
		type: "select",
		selected: true,
		message: "Выберите значение из предложенного списка",
		errorText: true,
	},
	// Почтовый индекс пользователя
	postcode: {
		id: "exmp-postcode",
		message: "Недопустимый формат почтового индекса",
		pattern: $.fn.formValidate.defaults.patterns.postcode,
		helpText: "Напишите ваш правильный почтовый индекс",
		errorText: true,
		min: 5,
		max: 6
	},
	// Большое текстовое поле ввода
	info: {
		id: "exmp-info",
		// Для проверки введенного в поле значения обработчику можно передать не только шаблон, можно передать в виде массива объекты с шалонами.
		pattern: [
			// В таких объектах есть три свойства
			{
				// Непосредственно сам шаблон регулярного выражения
				pattern: $.fn.formValidate.defaults.patterns.common,
				// Текст сообщения об ошибке для случаев некорректного введенного значения в поле
				message: "Недопустимые символы в поле. Уберите из введенного текста странные символы",
				// Тип результата, который должен быть получен после проверки с шаблоном регулярного выражения
				// В нашем конкретном случае мы просто проверяем поле на наличие несвойственных обычному тексту символов, поэтому и результат проверки ожидаем негативный
				result: false
			}
		],
		// Параметром count мы сообщаем обработчку о том, что поле должно быть снабжено счетчиком количества введенных символов, чтобы не утруждать пользователя подсчетом с целью определения соответсвия требованиям по допустимому числу символов
		count: true,
		helpText: "Напишите некую дополнительную информацию о себе",
		errorText: true,
		// Согласитесь, подсчитывать число символов, чтобы понять, уложился или нет, не очень хочется
		max: 512,
	},
	// Поле загрузки изображения пользователя
	image: {
		id: "exmp-file",
		// Обработчик имеет дело с полем загрузки файла
		file: {
			// Загружаем изображение
			type: "image",
			// Перечисляем допустимые форматы для загрузки
			format: ["jpg", "jpeg", "gif", "png"],
			// Устанавливаем минимальный размер изображения
			minsize: 60 * 1024,
			// Устанавливаем максимальный размер изображения
			maxsize: 512 * 1024,
			// Просим обработчик проверять прикрепляемый файл на соответствие требованиям «на лету» — сразу после выбора его в браузере
			onchangeValidation: true
		},
		message: "Неверный формат прикрепляемого файла",
		helpText: "Вы можете прикрепить файлы JPG, JPEG, GIF и PNG",
		errorText: true,
	},
	// У формы могут быть поля, которые мало отличаются друг от друга по требованиям. Такие поля мы называем общими текстовыми, и просто перечисляем их
	commonText: {
		// В виде массива передаем значения атрибутов ID таких полей
		fields: ["exmp-address"],
		// Указываем, как эти поля проверять регулярным выражением
		pattern: [{ 
			pattern: /[^-ёа-яa-z!@"'#$№;&}{\]\[\/\\%:?*(),.\s\t\d]/i, 
			result: false,
			message: "Недопустимые символы в тексте"
		}]
	}
});

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

// Передаем обработчику ссылку на функцию, которая может выполнять AJAX-запрос
// Либо так
$.exampleFormValidation.formValidate("ajax", $.myAjaxRequest);

// Либо, например, так
$.exampleFormValidation.formValidate("ajax", function(params) {
	// this - будет ссылаться на сам экземпляр обработчика
	var self = this;
	
	$.ajax(params);
});

Функция обратного вызова для обработчика

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

Эта функция будет вызвана в случае отсутствия полей с ошибками.

// Передаем обработчику ссылку на функцию обратного вызова
// Либо так
$.exampleFormValidation.formValidate("callback", $.myCallback);

// Либо, например, так
$.exampleFormValidation.formValidate("callback", function(options) {
	// this - будет ссылаться на сам экземпляр обработчика
	// options - параметры, установленные ранее для экземпляра обработчика
	var self = this;
	
	/**
	 * Некие действия с данными формы
	 */
});

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

if ($("#example-form-validation").length)
{
	$.extend({
		
		exampleFormValidation: $("#example-form-validation").formValidate({
			
			// Мы используем капчу для нашей формы
			useCaptcha: true,
			// Мы используем Google reCAPTCHA
			googleRecaptchaSelector: ".g-recaptcha-response",
			// Мы используем TwitterBootstrap
			useTwitterBootstrap: true,
			// Мы используем четвертую версию TwitterBootstrap
			twitterBootstrapVersion: 4,
			// Поля в фокусе и поля под курсором мыши будут подсвечиваться
			fieldFocusedClassName: "bg-field-focus",
			fieldHoveredClassName: "bg-field-hover",
			// Мы не будем использовать поле для общих сообщений пользователю, расположенное над формой
			useElementAboveForm: false,
			
		})
		
	});
	
	$.exampleFormValidation.formValidate("fields", {
		
		// Логин пользователя
		login: {
			// Значение атрибута ID поля формы
			id: "exmp-login",
			// Поле формы будет обязательным для заполнения
			required: true,
			// Указываем текст сообщения об ошибке для поля, если оно будет заполнено неверно
			message: "Недопустимые символы в логине",
			// Указываем шаблон регулярного выражения, по которому будет проверяться правильность введенного в поле значения
			// Мы сослались на сохраненный внутри валидатора-обработчика шаблон регулярного выражения для поля логина, но вы здесь можете указывать свой собственный шаблон
			pattern: $.fn.formValidate.defaults.patterns.login,
			// Этим параметром мы говорим обработчику о том, что у поля будет подсказка, и передаем, даже, её текст в виде строки
			helpText: "Логин может состоять только из символов латинского алфавита и цифр. Первым символом логина должны быть символ латинского алфавита или цифра. В логине вы можете использовать символы: <strong>. _ -</strong>",
			// Параметром errorText мы указываем обработчику необходимость использования сообщений об ошибках для поля
			errorText: true,
			// Указываем ограничения минимальной и максимальной длин введенного значения для поля
			min:3,
			max: 32
		},
		// Пароль пользователя
		password: {
			id: "exmp-password",
			// Как и логин, это поле является обязательным для заполнения
			required: true,
			// В форме будет присутствовать поле для подтверждения введенного пароля
			// Чтобы наш обработчик понял это, мы указываем значение атрибута ID этого поля
			passwordApprove: "exmp-password2",
			// Передаем шаблон регулярного выражения для проверки корректности пароля, вы можете использовать свой шаблон
			pattern: $.fn.formValidate.defaults.patterns.password,
			// Подсказка для поля воода пароля
			helpText: "Пароль может состоять из символов латинского алфавита, цифр и символов: <strong>. _ - ~ ` ! @ # $ % * ) ( ] [ } { ; : ' \" , < ></strong>. В пароле обязательно должны быть: как минимум одна цифра, как минимум одна заглавная буква.",
			// Необходимость использования сообщений об ошибке
			errorText: true,
			// Ограничения для длины введенного значения в поле
			min: 6,
			max: 16
		},
		// Электропочта пользователя
		email: {
			id: "exmp-email",
			required: true,
			message: "Недопустимый формат адрес электронной почты",
			pattern: $.fn.formValidate.defaults.patterns.email,
			helpText: "Напишите ваш действительный адрес электропочты, на который после регистрации будет отправлено письмо с дальнейшими инструкциями по активации учетной записи",
			errorText: true,
			min: 6,
			max: 64
		},
		// Имя пользователя
		name: {
			id: "exmp-name",
			required: true,
			message: "Недопустимые символы в введенном значении имени",
			pattern: $.fn.formValidate.defaults.patterns.name,
			helpText: true,
			errorText: true,
			min: 3,
			max: 32
		},
		// Фамилия пользователя
		// Это поле — первое из перечисленных, не являющееся обязательным к заполнению. Мы просто опускаем здесь параметр required
		surname: {
			id: "exmp-surname",
			message: "Недопустимые символы в введенном значении фамилии",
			pattern: $.fn.formValidate.defaults.patterns.name,
			// Подсказка у поля просто должна быть, а вот её текст мы не указываем
			helpText: true,
			errorText: true,
			min: 3,
			max: 32
		},
		// Отчество пользователя
		patronymic: {
			id: "exmp-patronymic",
			message: "Недопустимые символы в введенном значении отчества",
			pattern: $.fn.formValidate.defaults.patterns.name,
			helpText: true,
			errorText: true,
			min: 3,
			max: 32
		},
		// Дата рождения пользователя
		bdate: {
			id: "exmp-bdate",
			message: "Зарегистрироваться могут только совершеннолетние пользователи",
			// Это поле отличается от предыдущих тем, что является вводом даты в формате ДД.ММ.ГГГГ
			// Обработчик проверит соответствие введенного значения нужному формату
			date: true,
			// Параметр, который проверит введенную дату на факт её 18-летнего отставания от текущей даты. Например, для регистрации только совершеннолетних пользователей
			majorityCheck: true,
			helpText: "Выберите дату вашего рождения",
			errorText: true,
		},
		// Номер контактного телефона
		phone: {
			id: "exmp-phone",
			required: true,
			message: "Недопустимый формат телефонного номера",
			pattern: $.fn.formValidate.defaults.patterns.phone,
			helpText: "Укажите номер вашего контактного телефона: 79198889977 — для мобильного, 8632544433 — для городского",
			errorText: true,
		},
		// Страна пользователя
		country: {
			id: "exmp-country",
			required: true,
			// Говорим обработчику, что он имеет дело с полем списка
			type: "select",
			// И сообщаем обработчику, что в этом поле обязательно должно быть выбрано значение
			selected: true,
			message: "Выберите значение из предложенного списка",
			errorText: true,
		},
		// Регион пользователя
		region: {
			id: "exmp-region",
			required: true,
			type: "select",
			selected: true,
			message: "Выберите значение из предложенного списка",
			errorText: true,
		},
		// Город пользователя
		city: {
			id: "exmp-city",
			required: true,
			type: "select",
			selected: true,
			message: "Выберите значение из предложенного списка",
			errorText: true,
		},
		// Почтовый индекс пользователя
		postcode: {
			id: "exmp-postcode",
			message: "Недопустимый формат почтового индекса",
			pattern: $.fn.formValidate.defaults.patterns.postcode,
			helpText: "Напишите ваш правильный почтовый индекс",
			errorText: true,
			min: 5,
			max: 6
		},
		// Большое текстовое поле ввода
		info: {
			id: "exmp-info",
			// Для проверки введенного в поле значения обработчику можно передать не только шаблон, можно передать в виде массива объекты с шалонами.
			pattern: [
				// В таких объектах есть три свойства
				{
					// Непосредственно сам шаблон регулярного выражения
					pattern: $.fn.formValidate.defaults.patterns.common,
					// Текст сообщения об ошибке для случаев некорректного введенного значения в поле
					message: "Недопустимые символы в поле. Уберите из введенного текста странные символы",
					// Тип результата, который должен быть получен после проверки с шаблоном регулярного выражения
					// В нашем конкретном случае мы просто проверяем поле на наличие несвойственных обычному тексту символов, поэтому и результат проверки ожидаем негативный
					result: false
				}
			],
			// Параметром count мы сообщаем обработчку о том, что поле должно быть снабжено счетчиком количества введенных символов, чтобы не утруждать пользователя подсчетом с целью определения соответсвия требованиям по допустимому числу символов
			count: true,
			helpText: "Напишите некую дополнительную информацию о себе",
			errorText: true,
			// Согласитесь, подсчитывать число символов, чтобы понять, уложился или нет, не очень хочется
			max: 512,
		},
		// Поле загрузки изображения пользователя
		image: {
			id: "exmp-file",
			// Обработчик имеет дело с полем загрузки файла
			file: {
				// Загружаем изображение
				type: "image",
				// Перечисляем допустимые форматы для загрузки
				format: ["jpg", "jpeg", "gif", "png"],
				// Устанавливаем минимальный размер изображения
				minsize: 60 * 1024,
				// Устанавливаем максимальный размер изображения
				maxsize: 512 * 1024,
				// Просим обработчик проверять прикрепляемый файл на соответствие требованиям «на лету» — сразу после выбора его в браузере
				onchangeValidation: true
			},
			message: "Неверный формат прикрепляемого файла",
			helpText: "Вы можете прикрепить файлы JPG, JPEG, GIF и PNG",
			errorText: true,
		},
		// У формы могут быть поля, которые мало отличаются друг от друга по требованиям. Такие поля мы называем общими текстовыми, и просто перечисляем их
		commonText: {
			// В виде массива передаем значения атрибутов ID таких полей
			fields: ["exmp-address"],
			// Указываем, как эти поля проверять регулярным выражением
			pattern: [{ 
				pattern: /[^-ёа-яa-z!@"'#$№;&}{\]\[\/\\%:?*(),.\s\t\d]/i, 
				result: false,
				message: "Недопустимые символы в тексте"
			}]
		}
	});
	
	$.exampleFormValidation.formValidate("ajax", $.request)
		.formValidate("callback", function(options) {
			// this в этой функции обратного вызова будет ссылаться на текущий экземпляр обработчика формы 
			// В качестве аргумента функции обратного вызова будут переданы параметры экземпляра обработчика формы
			
			var self = this,
				form = options.form,
				message = "<p>В форму были введены следующие данные:</p><ul>",
				elements = form.elements,
				i;
				
			for (i in elements)
			{
				if ((elements[i].localName == "input" || elements[i].localName == "select" || elements[i].localName == "textarea") && elements[i].type != "submit" && elements[i].type != "reset" && $(elements[i]).val())
				{
					message += "<li>" + elements[i].name + " - " + $(elements[i]).val() + "</li>";
				}
			}
			
			message += "</ul>";
			
			self.formValidate("showModal", message, false, true);
			
		});
}

Внимательный читатель не мог не заметить вызов из обработчика метода showModal(). Этот метод показывает на экране модальное окно. Он принимает четыре аргумента.

1. string @message — сообщение для вывода на экран
2. boolean @scrollTo — требуется ли прокрутка до первого элемента формы с ошибкой. По умолчанию — true.
3. boolean @successTrue — сообщение об успешном действии или об ошибке. По умолчанию — false.
4. object @settings — параметры для метода-вызова модального окна. По умолчанию — пустой объект.

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

Если бы мы хотели лишить пользователя возможности нажать на кнопку закрытия модального окна (например, окна с сообщением об успешной авторизации и последующей перезагрузкой страницы), мы четвертым аргументом передали бы объект. Выглядело бы это так: self.formValidate("showModal", message, false, true, {withoutControls: true}).

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