https://www.americanbenefitscouncil.org/abcmain/includes/themes/mu…/poditools/js/podi-form.js?sv=1789571894406

1/*
2 * Potomac Digitek (PODI) @ 2014
3 *
4 */
5
6$(function(){
7
8	/*
9	 * Apply modernizr to change input fields to touch data type on touch-enabled devices, ones that attempt to clean the credit card number via mask are excluded
10	 */
11	if (Modernizr.touch) {
12		html5validInputs = ['color','date','datetime','datetime-local','email','month','number','range','search','tel','time','url','week'];
13
14		$('input[data-touch-type]').each(function(idx, element){
15			thisElementTouchType = $(element).data('touchType');
16			if( typeof $(element).data('ruleCleancreditcard') == 'undefined' && thisElementTouchType !== "" && $.inArray(thisElementTouchType.toLowerCase(), html5validInputs) > -1){
17				$(element).prop("type", thisElementTouchType);
18			}
19		});
20	}
21
22	/*
23	 * forms that need javascript to run, hidden with main css, show now (use classes 'hidden needsJS')
24	 */
25	$('form.needsJS').removeClass('hidden').addClass('show');
26
27	/* One way to initialize all popovers on a page would be to select them by their data-toggle attribute: */
28	$('[data-toggle="popover"]').popover();
29
30	/*
31	 * If button has 'data-loading-text' attribute, set to loading
32	 */
33	$('button').each(function(idx,el){
34
35		if(typeof($(this).attr('data-loading-text')) != 'undefined'){
36
37			$(this).attr('autocomplete','off').click(function() {
38
39				$(this).button('loading');
40
41				return true;
42
43			});
44		}
45
46		if(typeof($(this).attr('data-complete-text')) != 'undefined'){
47
48			$(this).attr('autocomplete','off').click(function() {
49
50				$(this).button('complete');
51
52				return true;
53
54			});
55		}
56
57	});
58
59	/*
60	 * Add required 'star' to labels with inputs that are 'data-rule-required'
61	 */
62	autoAddStar = function(){
63	$("form.hasValidation").find('[data-rule-required],[data-rule-require_from_group]').each(function(id, element){
64
65		var x = $(this).closest('.form-group').find('.control-label');
66		if( ( typeof( $(this).data('ruleRequired') ) !== 'undefined' && $(this).data('ruleRequired') == true ) || ( typeof( $(this).data('ruleRequire_from_group') ) !== 'undefined' && $(this).data('ruleRequire_from_group').length ) ){
67
68			if(!x.hasClass('autoAddStar')){
69				x.addClass('autoAddStar').append('&nbsp;<b class="text-danger">&lowast;</b>');
70				//x.addClass('autoAddStar').append('&nbsp;<span class="glyphicon glyphicon-asterisk text-danger"></span>');
71			}
72		}
73
74	});
75	}
76
77	/*
78	 * Make all date html5 close on change in chrome
79	 */
80	$('document').on('change','input[type="date"]',function(e) {
81
82		$(this).prop('type', 'text');
83		$(this).prop('type', 'date');
84
85	});
86
87	/*
88	 * Add form feedback to submitted form fields
89	 */
90	 addFeedbackToForm = function(errAry){
91
92		$.each( errAry, function( i, val ) {
93
94			var y = $( '[name="' + val + '"]' );
95			if(y.is('input') && y.parents('.input-group').length == 0){y.after('<span class="errorX glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>');}
96			y.closest('.form-group').addClass('has-error has-feedback');
97
98		});
99	 }
100
101	//google recaptcha setup
102
103	$(document).bind('DOMNodeInserted', function(event) {
104		if(event.target.nodeName == "DIV" && event.target.lastChild){
105			if(event.target.lastChild.className == 'g-recaptcha-response'){
106				$('.g-recaptcha-response').attr({'data-rule-required':'true','data-msg-required':'Please verify Security Measures','data-recaptcha':'true'});
107			}
108		}
109		if(event.target.nodeName == "SPAN" && event.target.id){
110			if(event.target.id == 'g-recaptcha-response-error'){
111				//console.log($(event.target).get(0));
112				//$(event.target).removeClass('sr-only');
113			}
114		}
115	});
116
117	//setup form validation defaults
118	setFormDefaults = function(){
119
120		/*
121		 * mask certain form fields like credit card or phone numbers
122		 * igorescobar.github.io/jQuery-Mask-Plugin/
123		 */
124
125		// these should be put onto the elements as a 'data-mask=""' attribute instead!
126
127		//$('[data-rule-phoneUS]').mask("(000) 000-0000");
128		//$('[data-rule-zipcodeUS]').mask("00000");
129
130		/*
131		 * jquery validator settings
132		 */
133		$.validator.setDefaults({
134			ignore: '.ignorevalidation'
135			,onfocusout:false
136			//,errorPlacement: function(error, element){} //prevent msg from displaying (only highlight)
137			,errorPlacement: function(error, element) {
138				if (element.parents('.input-group').length > 0 ) {
139					error.insertAfter(element.parents('.input-group'));
140				} else {
141					error.insertAfter(element);
142				}
143			}
144			,errorClass: 'help-block sr-only'
145			,errorElement: 'span'
146			,highlight: function (element, errorClass) {
147				var x = $(element).closest('.form-group');
148				x.addClass('has-error');
149			}
150			,unhighlight: function (element, errorClass) {
151				var x = $(element).closest('.form-group');
152				var useSClass = ( $(element).data('ruleRequired') || $(element).data('ruleRequire_from_group') )?true:false;
153
154				if(useSClass){x.addClass('has-success');}
155
156				x.removeClass('has-error');
157				x.find('.' + errorClass.replace(' ','.')).each(function (i, el) {
158					if ($(el).text().length > 0) {
159						x.addClass('has-error');
160					   x.removeClass('has-success');
161					}
162				});
163				if($(element).siblings('.errorX').length){
164					$(element).siblings('.errorX').remove();
165				}
166			}

167			,invalidHandler: function(event, validator) { // 'this' refers to the form
168
169				$('div.autoEMsg').remove(); //in case error message already there
170
171				var eMsg = $('<div />').addClass('alert alert-dismissible alert-danger autoEMsg').attr('role', 'alert');
172
173				var eMsgBtn = $('<button />').addClass('close').prop('type','button').attr('data-dismiss','alert').attr('aria-label','Close');
174
175				var eMsgBtnSpan = $('<span />').attr('aria-hidden','true').html('&times');
176
177				var eString = '<strong>We\'re sorry, your submission could not be completed because of the problems highlighted below.  Please try to correct these and try again.</strong><br />Fields marked with <strong>&lowast;</strong> are required <div class="errPack"></div>';
178
179				eMsgBtn.append(eMsgBtnSpan);
180				eMsg.append(eMsgBtn).append(eString);
181
182				$(this).prepend(eMsg);
183
184				//$('#g-recaptcha-response-error').removeClass('sr-only');
185
186				//scroll up to error message
187				$('body').scrollTop($('div.autoEMsg').scrollTop());
188
189				//reset submit button
190				$(this).find('button[type="submit"]').button('reset');
191	  		}
192	  		,showErrors: function(errorMap, errorList) {
193				if(this.numberOfInvalids() > 0){
194					var emsg = "Your form contains " + this.numberOfInvalids() + " errors, see details below.";
195					var xAry = new Array();
196					// console.log( errorMap );
197					// console.log( errorList );
198					for(var key in errorMap){
199						var attrName = key;
200						var attrValue = errorMap[key];
201						if(attrValue != "This field is required."){
202							if(xAry.indexOf(attrValue) < 0){
203								xAry.push(attrValue);
204							}
205						}
206					}
207					if(xAry.length){emsg += '<ul><li>' + xAry.join('</li><li>') + "</li></ul>";}
208					$(".autoEMsg .errPack").html(emsg);
209
210				}
211				else{$('div.autoEMsg').remove();}
212				this.defaultShowErrors();
213			}
214
215		});
216
217		//custom url rule to add http if not found
218		$.validator.addMethod("urlprotocol", function(value, element) {
219			var vv = $(element).val();
220
221			if( vv.length && vv.substr(0, 4) != 'http' ){
222
223				vv = 'http://' + vv;
224				$(element).val(vv);
225			}
226
227		  	return this.optional(element) || $.validator.methods.url.call(this, vv, element);
228		});
229
230		//custom remote rule for captcha processing
231		$.validator.addMethod("remoteCaptcha", function(value, element, params) {
232
233			var x = $(element).data('captchaChallenge');
234			var challenge = (x.length)?x:'dependency-mismatch';
235			var jparams = {"url":"/localCaptchaCheck.cfm","type":"post","data":{"captchaChallenge":challenge}};
236
237		  	return this.optional(element) || $.validator.methods.remote.call(this, value, element, jparams);
238		});
239
240		//custom remote rule for recaptcha processing
241		$.validator.addMethod("recaptcha", function(value, element, params) {
242
243		  	return this.optional(element) || grecaptcha.getResponse().length;
244		});
245
246		//get clean val & use for validator, since masking the input results in an invalid number as 'value'
247		//this function only is useful if a mask is present on the credit card element
248		$.validator.addMethod("cleancreditcard", function(value, element) {
249			try{
250				var vv = $(element).cleanVal();
251			} catch (e) {
252				var vv = $.trim( $(element).val() );
253			}
254
255		  	return this.optional(element) || $.validator.methods.creditcard.call(this, vv, element);
256		});
257
258		// Validate a Canadian postal code with JQuery Validation
259		// Use with http://docs.jquery.com/Plugins/Validation
260
261		// Adding the method
262		$.validator.addMethod("postcodeCAN", function(postal, element) {
263			return this.optional(element) ||
264			postal.match(/[a-zA-Z][0-9][a-zA-Z](-| |)[0-9][a-zA-Z][0-9]/);
265		}, "Please specify a valid postal code.");
266
267
268	}// End: Form Validator Defaults
269
270	// set form defaults (rerun this if dynamically adding/removing form fields)
271	setFormDefaults();
272
273	//populate required stars
274	autoAddStar();
275
276	// Init Validator for forms with class 'autoValidate'
277	podiFormAutoValidator = $('form.autoValidate').validate();
278
279	//set any invalid fields
280	if( typeof(addFeedbackToFormVar) != 'undefined' && typeof(addFeedbackToFormFlag) != 'undefined' && addFeedbackToFormFlag ){
281		addFeedbackToForm(addFeedbackToFormVar);
282	}
283
284});