double-validate

Jquery Double Validate

Плагин для двойной валидации (client+server). Содержит в себе унифицированный ajax+json запрос и умеет автоматически подставлять ошибки к конкретным полям.

Установка:

npm install double-validate
bower install double-validate

Parameters

Name	Desc	Default
params	Параметры транслируемые в JqueryFormValidator. Перекрывает параметры по умолчанию.	{scrollToTopOnError: false, borderColorOnError: false, errorMessageClass: 'error', lang: 'ru', }
urlHandler	Адрес обработчика данной формы.	Берет текущий action из формы.
showErrorMessage	Показывать ли alert при неуспешной попытке послать данные на сервер	true
errorMessage	Текст для alert при неуспешной попытке послать данные на сервер (к примеру 5хх ответ сервера, отсутствие интернета).	"Спасибо за отправку формы! Однако что-то пошло не так и мы не смогли получить данные. Перезвоните нам или попробуйте отправить еще раз "позже."
reportErrorToListener	Посылать ли данные об ошибки внешнему фиксатору. Нужно для личных нужд мониторинга работы форм.	false
urlErrorListener	Посылать ли данные об ошибки внешнему фиксатору. Нужно для личных нужд мониторинга работы форм.	null
classMainErrorContainer	Класс контейнера куда будут складываться общие ошибки	'double-validate__main-error-container'
classMainErrorItem	Класс элемента в который будет обернут элемент общей ошибки	'double-validate__main-error-item'

Callbacks

Name	Desc
onServerValidateSuccess	Вызывается после успешной отправки данных на сервер и получении status=true. Принимает в параметр reponse json ответ сервера.
onServerValidateError	Вызывается после успешной отправки данных на сервер и получении status=false. Принимает в параметр reponse json ответ сервера.
onBlockedForm	Вызывается при блокировке формы перед отправкой данных на сервер. Принимает в параметр Jquery выборку текущей формы.
onUnBlockedForm	Вызывается после разблокировки формы. Принимает в параметр Jquery выборку текущей формы.
onErrorRequest	Вызывается при ошибке отправки формы. Принимает параметры запроса.

Детали

• При отправке данных включает блокировку, не позволяя задублировать запрос до получения ответа. В этот момент на форму навешивается класс .double-validate--wait, для возможности дать визуальный фидбек юзверю.
• При ошибке отправки запроса, или не получении в ответет корректного json, выведет примитивный alert с сообщением, которое можно заменить через параметр errorText
• Учитывает файлы при отправке формы
• Есть общие ошибки которые нет возможности логически привязать к какому либо полю, они передаются через отдельное свойство объекта ответа сервера. Они размещаются в отдельном контейнере, классами которые можно управлять через свойства.
• Есть возможность послать на внешний сервер при ошибке отправки формы для внутренней системы алертов

Example

<form id="form" action="/ajax/formHandler.php">
	<div class="double-validate__main-error-container"></div>
	<input type="email" value="" placeholder="Email" required
		data-validation-error-msg-required="Поле, обязательно к заполнению"
		data-validation="required">

	<input type="text" value="" placeholder="Телефон" required
		data-validation-error-msg-required="Поле, обязательно к заполнению"
		data-validation="required">
</form>

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/jquery-form-validator/form-validator/jquery.form-validator.min.js"></script>
<script src="bower_components/double-validate/jquery.double-validate.js"></script>
<script>
	$('#form').doubleValidate({
		onServerValidateSuccess: function(response){
			console.log('you request added');
		},
		onServerValidateError: function(response){
			console.log('error');
		}
	});
</script>

Унифицированный ответ сервера:

{
	  "status": true
	, "mainErrors": [
		"Вы уже отправили заявку"
	]
	, "errors": {
		  "email": "Пользователь с таким email уже существует"
		, "company": "Для регистрации в качестве оптового покупателя необходимо заполнить это поле"
		[...]
	}
}

Работает на основе jQuery Form Validator. Выбран он вместо стандартного jquery.validate.js из-за большей гибкости управления из html, что проще в поддержке на ряде движков.