https://cdnn.1prime.ru//js/libs/ria.form.js

1
2(function($){
3
4	$.fn.riaForm = function( options ){
5
6		var version = "1.5";
7
8/* НАСТРОЙКИ */
9
10		var options = $.extend({
11			type: 'post',                       // для ajax, тип выполняемого запроса
12			dataType: 'json',                   // тип данных, в котором ожидается получить ответ от сервера
13			block: true,                        // блокировать форму при ajax запросе
14			loader: '.loader',                  // селектор лоадера, должен находиться в <form>...</form>
15			deleteData: false,                  // object - поля которые надо удалить из отправки
16			rules: false,                       // object - правила для обязательных к заполнению полей
17			mixinData: false,                   // function - добавление полей
18/*
19*           Настройки добавления классов ошибок на поля и label
20*/
21			errorClass: 'm-error',              // класс ошибки, добавляется на элемент и/или label (класс без точки)
22			errorInput: false,                  // добавлять класс ошибки на элемент
23			errorLabel: false,                  // добавлять класс ошибки на label
24/*
25*			Настройки вывода ошибок полей
26*		    <form> ... <span class="message-error" data-field="field_name"></span> ... </form>
27*/
28			errorMessage: true,                 // показывать сообщение об ошибке
29			message: '.message-error',          // селектор блока для вывода сообщения об ошибке
30			messageConnector: 'data-field',     // атрибут поля в которое выводится сообщение об ошибке, равен имени поля для которого выводится сообщение
31			messages: false,                    // object - сообщения об ошибках для обязательных к заполнению полей
32			errorCallback: undefined,           // function - вызывается при налиции ошибок в заполнении формы (обязательных полей определенных в rules) принимает массив ошибок
33/*
34*           Настройки вывода алертов полей
35*           <form> ... <div class="message-alert"></div> ... </form>
36*/
37			errorAlert: false,                  // показывать алерт пришедший в ответ
38			alert: '.message-alert',            // селектор блока для вывода алерта
39			alerts: false,                      // object - алерты
40			alertCallback: undefined,           // function - вызываетя после показа алерта
41/*
42*           callback функции
43*/
44			submitCallback: undefined,          // function - выполняется перед отправкой данных
45			successCallback: undefined,         // function - выполняется при возврате ответа success
46			forceCallback: undefined            // function - выполняется при любом ответе
47
48		}, options || {});
49
50/* ПЕРЕМЕННЫЕ */
51
52		var form = $( this );                    // <form> - вещать плагин на него
53		var loader = $( options.loader, form );  // лоадер
54		var dataUrl = form.attr( 'action' );     // url для ajax, берет с атрибута action form
55		var errors = 0;
56		var errorsMessage = {};
57
58/* ФУНКЦИИ  */
59
60		/* Показывает ошибку */
61		var showFieldError = function( name, error ){
62			/* показывает пару "поле ошибка" в консоли */
63			console.log( name,'  ', error );
64			/* Останавливается если не переданы параметры */
65			if( !name || !error ){
66				return;
67			}
68			var field;
69			/* Проверка какое поле имеет переданный name и сохранение в field */
70			if( $( 'input[name="' + name + '"]', form ).length > 0){
71				field = $( 'input[name="' + name + '"]', form );
72			} else if($('textarea[name="' + name + '"]', form ).length > 0){
73				field = $( 'textarea[name="' + name + '"]', form );
74			} else if($('select[name="' + name + '"]', form ).length > 0){
75				field = $( 'select[name="' + name + '"]', form );
76			} else {
77				return;
78			}
79			/* Добавляет класс ошибки тегу input, textarea или select */
80			if( options.errorInput ){

81				field.addClass( options.errorClass );
82			}
83			/* Добавляет класс ошибки к лейблу поля */
84			if( options.errorLabel ){
85				var label = $( 'label[for="'+ field.attr( 'id' ) +'"]' );
86				if( label.length > 0 ){
87					/* Добавляетк ласс ошибки на label[for="..."]*/
88					label.addClass( options.errorClass );
89				} else if( field.parent().get( 0 ) && field.parent().get( 0 ).tagName == 'LABEL' ){
90					/* Добавляет класс ошибки на первый родительский label */
91					field.parent().addClass( options.errorClass );
92				}
93			}
94			/* Показывает сообщение об ошибке для поля */
95			if( options.errorMessage ){
96				var message = $( options.message + '[' + options.messageConnector + '="' + name + '"]', form );
97				if( message.length > 0 && options.messages && options.messages[ name ] ){
98					message.empty().append( options.messages[ name ][ error ] ).show();
99				}
100			}
101		};
102
103		/* Проверка правил и подсветка ошибок */
104		var checkRules = function(){
105			for( key in options.rules ){
106				var type = $.type( options.rules[ key ] );
107				/* Если передан объект */
108				if( type === 'object' ){
109					for( node in options.rules[ key ] ){
110						var name = key;
111						var value = options.rules[ key ][ node ];
112						checkRulesType( name, node, value );
113					}
114				}
115				/* Если передан массив */
116				if( type === 'array' ){
117					var name = key;
118					for( node in options.rules[ key ]){
119						value = options.rules[ key ][ node ];
120						checkRulesType(name, value);
121					}
122				}
123				/* Проверяет переданное значение */
124				else{
125					checkRulesType( key, options.rules[ key ] );
126				}
127			}
128			return errors;
129		};
130
131		var checkRulesType = function( name, key, value ){
132			switch( key ){
133
134				/* Функция */
135				case 'function':
136					if ( value instanceof Function ){
137						var result = value( form, name );
138						if( result == false ){
139							errors++;
140							errorsMessage[ name ] = 'function';
141							showFieldError( name, 'function');
142						}
143					}
144					break;
145
146				/* Пустрое поле */
147				case 'empty':
148					var empty = checkFieldEmpty( name );
149					if ( empty == true ){
150						errors++;
151						errorsMessage[ name ] = 'empty';
152					}
153					break;
154
155				/* Email */
156				case 'email':
157					var email = checkFieldEmail( name );
158					if( email == true ){
159						errors++;
160						errorsMessage[ name ] = 'email';
161					}
162					break;
163
164				case 'number':
165					var number = checkFieldNumber( name );
166					if( number == true ){
167						errors++;
168						errorsMessage[ name ] = 'number';
169					}
170					break;
171			}
172			/* Отдельная проверка переданного объекта*/
173			if ( key instanceof Function ){
174				var result = key( form, name );
175				if ( result == false ){
176					errors++;
177					errorsMessage[ name ] = 'function';
178					showFieldError( name, 'function' );
179				}
180			}
181		};
182
183		/* Проверяет пустые поля */
184		var checkFieldEmpty = function( name ){
185
186			/* Для input тип checkbox и radio */
187			if($('input[name="'+ name +'"][type="checkbox"], input[name="'+ name +'"][type="radio"]', form).length > 0){
188				var value = $('input[name="'+ name +'"]', form).is(':checked');
189				if(value == false){
190					showFieldError(name, 'empty');
191					return true;
192				}
193			}
194
195			/* Для input тип file */
196			if($('input[name="'+ name +'"][type="file"]', form).length > 0){
197				var file_api = ( window.File && window.FileReader && window.FileList && window.Blob ) ? true : false,
198					file_input = $('input[name="'+ name +'"][type="file"]', form),
199					value;
200				if( file_api && file_input[ 0 ].files[ 0 ] ){
201					value = file_input[ 0 ].files[ 0 ].name;
202				} else {
203					value = file_input.val().replace( "C:\\fakepath\\", '' );
204				}
205				if(value.length == 0){
206					showFieldError(name, 'empty');
207					return true;
208				}
209			}
210
211			/* Для input тип text */
212			if($('input[name="'+ name +'"]', form).length > 0){
213				var value = $('input[name="'+ name +'"]', form).val();
214				if(value.length == 0){
215					showFieldError(name, 'empty');
216					return true;
217				}
218			}
219
220			/* Для textarea */
221			if($('textarea[name="'+ name +'"]', form).length > 0){
222				var value = $('textarea[name="'+ name +'"]', form).val();
223				if(value.length == 0){
224					showFieldError(name, 'empty');
225					return true;
226				}
227			}
228
229			/* Для select */
230			if($('select[name="'+ name +'"]', form).length > 0){
231				var value = $('select[name="'+ name +'"]', form).val();
232				if(value.length == 0){
233					showFieldError(name, 'empty');
234					return true;
235				}
236			}
237
238			return false;

239
240		};
241
242		/* Подсвечивает поля у которых указан тип проверки email */
243		var checkFieldEmail = function( name ){
244
245			/* Для input */
246			if( $( 'input[name="' + name + '"]', form ).length > 0){
247				var value = $( 'input[name="' + name + '"]', form ).val();
248				reg = new RegExp("[0-9a-z_\\-]+@[0-9a-z\\-_^.]+\\.[a-z]{2,10}", 'i' );
249				if( !reg.test( value )){
250					showFieldError( name, 'email' );
251					return true;
252				}
253				else {
254					return false;
255				}
256			}
257
258			/* Для textarea */
259			if( $( 'textarea[name="' + name + '"]', form ).length > 0){
260				var value = $( 'textarea[name="' + name + '"]', form ).val();
261				reg = new RegExp("[0-9a-z_\\-]+@[0-9a-z\\-_^.]+\\.[a-z]{2,10}", 'i');
262				if( !reg.test( value ) ){
263					showFieldError( name, 'email' );
264					return true;
265				}
266				else {
267					return false;
268				}
269			}
270
271			/* Для select */
272			if( $( 'select[name="' + name + '"]', form ).length > 0){
273				var value = $( 'select[name="' + name + '"]', form ).val();
274				reg = new RegExp("[0-9a-z_\\-]+@[0-9a-z\\-_^.]+\\.[a-z]{2,10}", 'i' );
275				if( !reg.test( value ) ){
276					showFieldError( name, 'email' );
277					return true;
278				}
279				else {
280					return false;
281				}
282			}
283
284		};
285
286		/* Подсвечивает поля у которых указан тип проверки number */
287		var checkFieldNumber = function( name ){
288
289			/* Для input */
290			if($( 'input[name="' + name + '"]', form ).length > 0){
291				var value = $( 'input[name="'+ name +'"]', form ).val();
292				reg = new RegExp("[0-9]", 'i' );
293				if( !reg.test( value ) ){
294					showFieldError( name, 'number');
295					return true;
296				}
297				else {
298					return false;
299				}
300			}
301
302			/* Для textarea */
303			if( $( 'textarea[name="' + name + '"]', form ).length > 0){
304				var value = $( 'textarea[name="'+ name +'"]', form ).val();
305				reg = new RegExp("[0-9]", 'i' );
306				if( !reg.test( value ) ){
307					showFieldError( name, 'number' );
308					return true;
309				}
310				else {
311					return false;
312				}
313			}
314
315			/* Для select */
316			if( $( 'select[name="' + name + '"]', form ).length > 0){
317				var value = $( 'select[name="' + name + '"]', form ).val();
318				reg = new RegExp("[0-9]", 'i' );
319				if( !reg.test( value ) ){
320					showFieldError( name, 'number' );
321					return true;
322				}
323				else {
324					return false;
325				}
326			}
327
328		};
329
330		/* Выводит ошибки которые приходят с сервера */
331		var showAllErrors = function( errors ){
332			for( key in errors ){
333				showFieldError( key, errors[ key ]);
334			}
335		};
336
337		/* Прячет все ошибки в форме */
338		var hideAllErrors = function(){
339			errors = 0;
340			errorsMessage = {};
341			/* Убирает класс ошибки у тегов полей */
342			if ( options.errorInput ){
343				$( 'input', form ).removeClass( options.errorClass );
344				$( 'textarea', form ).removeClass( options.errorClass );
345				$( 'select', form ).removeClass( options.errorClass );
346			}
347			/* Убирает класс ошибки у лейблов */
348			if( options.errorLabel ){
349				var label = $( 'label', form ).removeClass( options.errorClass );
350			}
351			/* Прячет сообщение об ошибках */
352			if( options.errorMessage ){
353				$( options.message, form ).hide();
354			}
355		};
356
357		/* Прячет ошибки у одного элемента формы */
358		var hideError = function( elem ){
359			/* Убирает класс error */
360			if( options.errorInput ){
361				elem.removeClass( options.errorClass );
362			}
363			/* Убирает класс error у label для элемента */
364			if( options.errorLabel ){
365				// Ищем label с id как на элементе
366				var label = $( 'label[for="' + elem.attr('id') + '"]' );
367				// если такой label есть убираем класс ошибки если нет ищем родительский label и удаляем класс с него
368				if ( label.length > 0 ){
369					label.removeClass( options.errorClass );
370				} else if ( elem.parent().get( 0 ).tagName == 'LABEL' ){
371					elem.parent().removeClass( options.errorClass );
372				}
373			}
374			/* Прячем сообщение с ошибкой */
375			if( options.errorMessage ){
376				var message = $( options.message + '[' + options.messageConnector + '="' + elem.attr( 'name' ) + '"]', form );
377				message.fadeOut( 100 );
378			}
379		};
380
381		/* Показывает алерт */
382		var showAlert = function(errors){
383			var counter = 0;
384			for ( key in errors ){
385				if ( options.alerts[ key ] && counter < 1){
386					var alert = $( options.alert, form );
387					var error = errors[ key ];
388					alert.empty().append( options.alerts[ key ][ error ] ).show();
389					if( options.alertCallback instanceof Function ){
390						options.alertCallback( errors );
391					}
392				}
393				counter++;
394			}
395		};
396
397		/* Скрывает  */
398		var hideAlert = function(){
399			$( options.alert, form ).hide();
400		};
401
402		/* Блокирует форму */
403		var blockForm = function(){
404			$( 'input[type="submit"]', form ).attr( 'disabled','disabled' );
405			$( 'button', form ).attr( 'disabled','disabled' );
406		};
407
408		/* Снимает блокировку формы */
409		var unblockForm = function(){
410			$( 'input[type="submit"]', form ).removeAttr( 'disabled' );
411			$( 'button', form ).removeAttr( 'disabled' );
412		};
413
414        /* Возвращает объект полей = значений */
415		var getFormDataObject = function(){
416			var formData = form.serializeArray();
417            var dataOut = {};
418			for( key in formData ){
419				dataOut[ formData[ key ].name ] = formData[ key ].value;
420			}
421			return dataOut;
422		};
423
424		/* Конвертирует значения полей */
425		var convertData = function( formData ){
426			if( !options.convertData instanceof Object ){ return; }
427			for( convertKey in options.convertData ){
428				if( options.convertData[ convertKey ] instanceof Function ){
429					var result = options.convertData[ convertKey ](formData[ convertKey ]);
430					formData[ convertKey ] = result;
431				}
432			}
433			return formData;
434		};
435
436		/* Удаляет лишние данные при сабмите формы */
437		var deleteData = function( formData ){
438			for( key in options.deleteData ){
439				delete formData[ options.deleteData[ key ] ];
440			}
441			return formData;
442		};
443
444		/* Отправка формы */
445		var formSubmit = function(){
446
447            /* Переменные */
448            var formData,
449                convertLength = 0;
450
451            /* Конвертирует в формат для json */
452            formData = getFormDataObject();
453
454            /* Конвертирует поля по переданным функциям  */
455            if ( options.convertData instanceof Object ){
456                convertLength = $.map( options.convertData, function( n, i ) { return i; }).length;
457                if ( convertLength > 0 ){
458                    formData = convertData( formData );
459                }
460            }
461
462            /* Добавляет дополнительные данные из mixinData поверх данных формы */
463            if ( options.mixinData instanceof Function ){
464                mixinData = options.mixinData();
465                formData = $.extend( formData, mixinData || {} );
466            }
467
468            /* Удаляет лишние данные */
469            if ( options.deleteData instanceof Object ){
470                formData = deleteData( formData );
471            }
472
473            /* Вызывает callback при сабмите */
474            if ( options.submitCallback instanceof Function ){
475                options.submitCallback( form, formData );
476            }
477
478            $.ajax({
479                type: options.type,
480                url: dataUrl,
481                dataType: options.dataType,
482                data: formData,
483                xhrFields: {
484                    withCredentials: true
485                },
486                error: function( data ){
487                    /* Прячет индикатор загрузки */
488                    loader.fadeOut();
489                    /* Вызывает сallback ошибки валидации формы */
490                    if( options.errorCallback instanceof Function ){
491                        options.errorCallback( data );
492                    }
493                },
494                success: function( data ){
495                    /* Прячет индикатор загрузки */
496                    loader.fadeOut();
497                    /* Снимает блокировку с формы */
498                    if( options.block == true ){
499                        unblockForm();
500                    }
501                    if( data.error || ( data.status && data.status.toLowerCase() == 'error' )){
502                        /* Показывает ошибку */
503                        showAllErrors( data.errors );
504                        /* Показывает алерты */
505                        if( options.alerts && options.errorAlert ){
506                            showAlert( data.errors );
507                        }
508                        /* Вызывает сallback ошибки валидации формы */
509                        if( options.errorCallback instanceof Function ){
510                            options.errorCallback(data);
511                        }
512                    }
513                    else{
514                        /* Вызывает сallback успешной валидации формы */
515                        if( options.successCallback instanceof Function ){
516                            options.successCallback( data, form );
517                        }
518                    }
519                    /* Вызывает force сallback */
520                    if( options.forceCallback instanceof Function ){
521                        options.forceCallback( data, form );
522                    }
523                }
524            });
525
526        };
527
528		/* Собственные события */
529		form.bind( 'hideErrors', function(){
530			hideAllErrors();
531		});
532
533
534/* СОБЫТИЯ */
535
536		/* Сабмит формы */
537		form.off( 'submit' ).on( 'submit', function( e ){
538
539			e.preventDefault(); // отменяет отправку формы
540
541			hideAllErrors();    // прячет ошибки
542			hideAlert();        // прячет алерты
543
544			/* Проверяет обязательные для заполнения поля */
545			errors = checkRules();
546
547			/* Вызывает callback и передает в него объект с ошибками */
548			if( errors > 0 && options.errorCallback instanceof Function ){
549				options.errorCallback( errorsMessage );
550			}
551
552			// если нет ошибок в полях
553			if ( errors == 0 ){
554
555                /* Показывает индикатор загрузки */
556                loader.fadeIn();
557
558                /* Ставит блокировку на форму что бы исключить повторные sсабмиты */
559                if( options.block == true ){
560                    blockForm();
561                }
562
563                /* Проверка на невидимое поле recaptcha */
564                if ( $( 'input[name="g-recaptcha-response"]', form ).length ) {
565                    checkCaptchaToken({
566                        callback: function(token) {
567                            $('input[name=g-recaptcha-response]', form).val(token);
568                            formSubmit();
569                        }
570                    })
571                } else {
572                    formSubmit();
573                }
574			}
575		});
576
577		/* Убрать ошибку с input и textarea при изменении */
578		$( 'input, textarea', form ).on( 'keydown', function(){
579			hideError( $( this ) );
580		});
581
582		/* Убрать ошибку с select и input[type="checkbox"] при изменении */
583		$( 'input[type="checkbox"], select', form ).on( 'change', function(){
584			hideError( $( this ) );
585		});
586
587		/* Убрать ошибку с input[type="radio"] при изменении*/
588		$( 'input[type="radio"]', form ).on( 'change', function(){
589			// ищем все radio с name как у измененного и убираем ошибку со всех
590			$( 'input[type="radio"][name="' + $( this ).attr( 'name') + '"]', form ).each( function(){
591				hideError( $( this ) );
592			});
593		});
594
595		return version;
596
597	}
598
599})( jQuery );