https://www.focusgroup.cc/en/js/jquery.validate.js

1/*
2 * jQuery Validate Plugin
3 * Copyright (c) 2015 Alvin So
4 * Version: 1.18 (12-JAN-2018)
5 *
6 * setting sample:
7 *	=====================================================
8 *		1st = name of input
9 *		2nd = validate setting
10 *		[ 'captcha', {
11 *			message: 'Please enter captcha',						//message when not valid
12 *			messageElement: $('#captcha-error'),					//message element (string or jQuery object or function)
13 *			errorElement: $('input[name="captcha"]'),				//error class element (string or jQuery object or function)
14 *			method: [												//validate method in array format (1st = name, 2nd = setting, 3rd = message)
15 *				[ 'req' ],											//no message mean using global message			
16 *				[ 'minlen', 4, 'Minimum 4 characters' ],			
17 *				[ 'maxlen', 4, 'Maximum 4 characters' ]		
18 *			],
19 *			validFillOnly: false,									//validate on element have value only
20 *			onError: function(form, element, validator, error) {},	//callback when not valid
21 *			onSuccess: function(form, element, validator) {			//callback when valid (return false to show error)
22 *	 			return true;
23 *			}		
24 *		} ]
25 *	=====================================================
26 */
27(function($) {
28	$.fn.extend({
29		validate: function(options) {
30			var setting = {
31				errorClass: 'error',					//class will add to messageElement when not valid
32				successClass: 'success',				//class will add to messageElement when valid
33				onSubmitOnly: true,						//validate on form submit only
34				autoScroll: true,						//scroll to first error class when not valid
35				autoScrollOffset: 0,					//scroll to first error + this value
36				message: '',							//global message when not valid
37				messageElement: '',						//global message element (string or jQuery object or function)
38				setting: [],							//setting
39				onError: function(form) {},				//callback when not valid
40				onSuccess: function(form, validator) {  //callback when valid (return false to show error)
41					return true;
42				}
43			};
44			$.extend(true, setting, options);
45			return this.each(function() {
46				$.each($(this), function() {
47					var _self = $(this);
48					if(! setting.onSubmitOnly)
49					{
50						$.each(setting.setting, function() {
51							var _name = this[0];
52							var _setting = this[1];
53							var input = getInput(_name);
54							if(input.length && _setting.method)
55							{
56								input.on('change blur', function() {
57									var _validator = new Validator($);
58									hideError(_name);
59									validate(input, _validator, _setting);
60								});

61							}
62						});
63					}
64					_self.on({
65						submit: function() {
66							var _validator = new Validator($);
67							hideError();
68							$.each(setting.setting, function() {
69								var _name = this[0];
70								var _setting = this[1];
71								var input = getInput(_name);
72								if(input.length)
73								{
74									validate(input, _validator, _setting);
75								}
76							});
77							var setError = function() {
78								var message_element;
79								if(setting.message && setting.messageElement)
80								{
81									message_element = typeof(setting.messageElement) == 'function' ? setting.messageElement(_self) : $(setting.messageElement, _self);
82									if(! message_element.html())
83									{
84										message_element.html(setting.message).show();
85									}
86								}
87								if(setting.autoScroll)
88								{
89									var obj = message_element && message_element.length ? message_element : $('.' + setting.errorClass, _self);
90									if(obj.length)
91									{
92										$('html, body').animate({
93											scrollTop: obj.first().offset().top + setting.autoScrollOffset
94										});
95									}
96								}
97							}
98							if(! _validator.getValStatus())
99							{
100								setError();
101								setting.onError(_self);
102							}
103							else
104							{			
105								var result = setting.onSuccess(_self, _validator);
106								if(! result)
107								{
108									setError();
109									_validator.setValStatus(false);
110								}
111							}
112							return _validator.getValStatus();
113						},
114						reset: function() {
115							hideError();							
116						}
117					});
118					
119					hideError();
120					
121					function hideError(obj) {
122						var message_element, error_element;
123						if(obj)
124						{
125							$.each(setting.setting, function() {
126								if(this[0] == obj)
127								{									
128									var _setting = this[1];
129									if(_setting.errorElement)
130									{										
131										error_element = typeof(_setting.errorElement) == 'function' ? _setting.errorElement(getInput(this[0])) : $(_setting.errorElement, _self);		
132									}
133									if(! error_element || ! error_element.length)
134									{
135										error_element = getInput(this[0]);
136									}
137									if(error_element.length)
138									{										
139										error_element.removeClass(setting.errorClass);
140									}
141									if(_setting.messageElement)
142									{
143										message_element = typeof(_setting.messageElement) == 'function' ? _setting.messageElement(getInput(this[0])) : $(_setting.messageElement, _self);										
144										if(message_element.length)
145										{
146											message_element.html('').hide();
147										}
148									}
149									return false;
150								}
151							});
152						}
153						else
154						{
155							$('.' + setting.errorClass, _self).removeClass(setting.errorClass);							
156							if(setting.messageElement)
157							{
158								message_element = typeof(setting.messageElement) == 'function' ? setting.messageElement(_self) : $(setting.messageElement, _self);										
159								if(message_element.length)
160								{
161									message_element.html('').hide();
162								}
163							}
164							$.each(setting.setting, function() {
165								var _setting = this[1];
166								if(_setting.messageElement)
167								{
168									message_element = typeof(_setting.messageElement) == 'function' ? _setting.messageElement(getInput(this[0])) : $(_setting.messageElement, _self);										
169									if(message_element.length)
170									{
171										message_element.html('').hide();
172									}
173								}
174							});
175						}
176					}
177					
178					function getInput(name) {
179						if(typeof(name) == 'string')
180						{							
181							var input = $('[name="' + name + '"]', _self);
182							if(! input.length)
183							{
184								input = $('[name^="' + name + '"]', _self);
185							}
186							return input;
187						}
188						else
189						{
190							return name;
191						}
192					}
193					
194					function validate(input, _validator, _setting) {
195						var success = true;
196						var default_setting = {
197				 			message: '',													//message when not valid
198				 			messageElement: '',												//message element (string or jQuery object or function)
199				 			errorElement: '',												//error class element (string or jQuery object or function)
200				 			method: [],														//validate method in array format (1st = name, 2nd = setting, 3rd = message)
201							validFillOnly: false,											//validate on element have value only
202				 			onError: function(form, element, validator, error) {}

202,			//callback when not valid
203				 			onSuccess: function(form, element, validator) {					//callback when valid (return false to show error)
204								return true;
205							}				
206				 		}		
207						$.extend(default_setting, _setting);
208						var setError = function() {
209							var error_element;
210							if(default_setting.errorElement)
211							{								
212								error_element = typeof(default_setting.errorElement) == 'function' ? default_setting.errorElement(input) : $(default_setting.errorElement, _self);		
213							}
214							if(! error_element || ! error_element.length)
215							{
216								error_element = input;
217							}
218							error_element.addClass(setting.errorClass);
219						}
220						$.each(default_setting.method, function(key) {
221							var method = this[0];
222							var method_setting = this[1];
223							var message = this[2];
224							var value, message_element;
225							if(input.length)
226							{
227								if($.inArray(method, [ 'selone_radio' , 'selone_chk' ]) > -1)
228								{
229									value = input;
230								}
231								else if($.inArray(input.first().prop('tagName').toLowerCase(), [ 'radio' , 'checkbox' ]) > -1)
232								{
233									value = input.filter(':checked').val();
234								}
235								else
236								{
237									value = input.val();
238								}
239								if(! default_setting.validFillOnly || (default_setting.validFillOnly && value.length > 0))
240								{									
241									if(! _validator.val(value, method + (method_setting !== '' ? '=' + method_setting : '')))
242									{
243										success = false;
244										if(default_setting.messageElement)
245										{											
246											message_element = typeof(default_setting.messageElement) == 'function' ? default_setting.messageElement(input) : $(default_setting.messageElement, _self);			
247										}
248										if(! message_element)
249										{
250											message_element = typeof(setting.messageElement) == 'function' ? setting.messageElement(_self) : $(setting.messageElement, _self);			
251										}
252										if(message_element && message_element.length)
253										{
254											if(message)
255											{
256												message_element.html(message).show();												
257											}
258											else if(default_setting.message)
259											{
260												message_element.html(default_setting.message).show();
261											}
262										}
263										setError();
264										default_setting.onError(_self, input, _validator, key);
265										return false;
266									}
267								}
268							}
269						});
270						if(success)
271						{
272							var result = default_setting.onSuccess(_self, input, _validator);
273							if(! result)
274							{
275								setError();
276								_validator.setValStatus(false);
277							}
278						}
279					}
280				});
281			});
282		}
283	});
284})(jQuery);