https://www.gsgms.org/etc.clientlibs/gsusafoundation/components/fo…/clientlibs/formcontainer.webtolead.min.js

1$(document).ready(function () {
2    // Bind by class (always added for webtolead action) and legacy id.
3    // Site JS may rewrite ids to web-to-lead-0, so class is the reliable hook.
4    $(document).on('submit', 'form.web-to-lead, form#web-to-lead', function(e) {
5      setUTMParamValues($(this));
6     let formValid = isFormValid($(this));
7        e.stopPropagation();
8        e.preventDefault();
9        if(formValid){
10        	submitForm($(this));
11        }
12        if($('.formElements .errfld').length && $('.formElements .errfld')[0]){
13          $(window).scrollTop($('.formElements .errfld').offset().top - 180);        
14        }
15        if($('.error-msg-radio:visible').length && $('.error-msg-radio:visible')[0]){
16          $(window).scrollTop($('.error-msg-radio:visible').offset().top - 180);
17        } 
18        if($('.error-msg-checkbox:visible').length && $('.error-msg-checkbox:visible')[0]){
19          $(window).scrollTop($('.error-msg-checkbox:visible').offset().top - 180);
20        }
21        return false;
22    });
23
24
25    function setUTMParamValues(form) {
26        var utm_campaign = getUrlParam("utm_campaign");
27        var utm_medium = getUrlParam("utm_medium");
28        var utm_source = getUrlParam("utm_source");
29        var utm_content = getUrlParam("utm_content");
30        var utm_id = getUrlParam("utm_id");
31        var utm_term = getUrlParam("utm_term");
32        var ga_client_id = getUrlParam("ga_client_id");
33        var ga_event_id = getUrlParam("ga_event_id");
34
35        if(!isBlank(utm_campaign)){
36            var utmCampaignField = form.find("input[name='UTM_Campaign__c']");
37            if(utmCampaignField){
38                $(utmCampaignField[0]).val(utm_campaign);
39            }
40        }
41        if(!isBlank(utm_medium)){
42            var utmMediumField = form.find("input[name='UTM_Medium__c']");
43            if(utmMediumField){
44                $(utmMediumField[0]).val(utm_medium);
45            }
46        }
47        if(!isBlank(utm_source)){
48            var utmSourceField = form.find("input[name='UTM_Source__c']");
49            if(utmSourceField){
50                $(utmSourceField[0]).val(utm_source);
51            }
52        }
53        if(!isBlank(utm_content)){
54            var utmContentField = form.find("input[name='UTM_Content__c']");
55            if(utmContentField){
56                $(utmContentField[0]).val(utm_content);
57            }
58        }
59        if(!isBlank(utm_id)){
60            var utmIdField = form.find("input[name='UTM_ID__c']");
61            if(utmIdField){
62                $(utmIdField[0]).val(utm_id);
63            }
64        }
65        if(!isBlank(utm_term)){
66            var utmTermField = form.find("input[name='UTM_Term__c']");
67            if(utmTermField){
68                $(utmTermField[0]).val(utm_term);
69            }
70        }
71        if(!isBlank(ga_client_id)){
72                    var gaClientField = form.find("input[name='GA_Client_Id__c']");
73                    if(gaClientField){
74                        $(gaClientField[0]).val(ga_client_id);
75                    }
76                }
77        if(!isBlank(ga_event_id)){
78                            var gaEventField = form.find("input[name='GA_Event_Id__c']");
79                            if(gaEventField){
80                                $(gaEventField[0]).val(ga_event_id);
81                            }
82                        }
83    }
84
85    function displayErrors(errors, form){
86    	let captchError = false;
87        var errorMessage = "";
88        form.find("div.form_row").find("div.form_error").each(function( index ) {
89            if($(this).html() != null && $(this).html().trim().length > 0){
90                $(this).html("").hide();
91            }
92        });
93        var formErrorContainer = form.find("div.form-error-container");
94		if (($('.form-error-container')).length > 0) {
95            $('.form_error_title').remove();
96             $('.form_error').remove();
97        }
98        errorMessage += "<p class=\"form_error form_error_title\">Please correct the errors and submit your information again.</p>";
99        for (var i = 0; i < errors.length; i++) {
100            if(!(errors[i]==='error') && !(errors[i]==='captcha-error')){
101            	errorMessage += "<div class=\"form_row form_error\">" + errors[i] + "</div>";
102            } else if(errors[i]=='captcha-error'){
103            	captchError =true;
104            	if(!($('.form_error_captcha')).length > 0){
105	            	$('.captca_error_container').show();
106	            	$('.captca_error_container').append("<div class=\"form_row form_error_captcha\">Please Validate the Recaptcha</div>");
107            	}
108            }	
109        }
110        if(!captchError){
111			$('.captca_error_container').hide();
112        }
113        $('.form-error-container').append(DOMPurify.sanitize(errorMessage, {SAFE_FOR_JQUERY:true}));
114        $("#recaptcha-error").hide();
115    }
116
117    // Post to :formstart only. Core Form Handling validates, then webtolead
118    // forward sets {path}.webtolead.html (WebToLeadServlet). Do not append
119    // .webtolead.html here — that re-enters Forms Handling / can 504; and
120    // an empty ajax URL posts to the page.

121    function getFormServletUrl(form) {
122        var formStart = form.find("input[name=':formstart']").val();
123        if (formStart) {
124            return formStart;
125        }
126        return form.attr("action") || "";
127    }
128
129    function submitForm(form) {
130        var action = getFormServletUrl(form);
131        var formId = form.attr("id");
132        var formData = new FormData(form[0]);
133        $.ajax({
134            type: "POST",
135            encType: "multipart/form-data",
136            url: action,
137            cache: false,
138            processData: false,
139            contentType: false,
140            data: formData,
141            success: function(response, status, xhr) {
142                var ct = xhr.getResponseHeader("content-type") || "";
143                if (ct.indexOf('html') > -1) {
144                    var responseForm = $(response).find("#" + formId);
145                    if (responseForm != null && responseForm.length > 0) {
146                        form.html(DOMPurify.sanitize($(responseForm[0]).html(), {SAFE_FOR_JQUERY:true}));
147                    }
148                }
149                if (ct.indexOf('json') > -1) {
150                    if (response.status == "success") {
151                        console.log("form submitted successfully");
152                        var redirect = form.find("input[name=':redirect']");
153                        if (redirect != null && redirect.length > 0) {
154                            console.log("redirect to " + $(redirect).val());
155                            window.location.href = $(redirect).val();
156                        }
157                    } else {
158                        var errors = response.errors;
159                        displayErrors(errors, form);
160                    }
161                }
162                localStorage.removeItem("recaptchaError");
163            },
164            error: function(xhr, status, error) {
165                $(".validation-errors").html(xhr.responseText);
166            }
167        });
168    }
169
170
171
172    function isBlank(val) {
173        return val == null || val == "" || val.trim() == "";
174    }
175    function getUrlParam(name){
176        try {
177            var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
178            return results[1] || 0;
179        }catch(error){
180
181        }
182        return "";
183    }
184
185
186    /* form validation */
187  function isFormValid (scope) {
188    const formOptions = scope.find('.formOptions');
189    const formTexts = scope.find('.formText');
190    let isFormOptionsValid = true;
191    let isFormTextsValid = true;
192    formOptions && $(formOptions).each((index,options) => {
193      const reqOptions = $(options).find('.required');
194      const isCheckable = $(options).find('input').length ? true : false;
195      const isSelectable = $(options).find('select').length ? true : false;
196      if(isCheckable){
197        let isChecked = false;
198        if(reqOptions.length){
199          // .required is on the legend/wrapper, not the inputs — check the actual radios/checkboxes
200          $(options).find('input[type="radio"], input[type="checkbox"]').each((index,subOpt) => {
201            if($(subOpt).is(':checked') && !$(subOpt).prop('disabled')){
202              isChecked = true;
203            }
204          });
205        }
206        else{
207          isChecked = true;
208        }
209        if($(options).css("display") != 'none') {
210          if(!isChecked){
211            $(options).closest('.formOptions').find('.error-msg-checkbox').css('display','block');
212            $(options).closest('.formOptions').find('.error-msg-radio').css('display','block');
213            $(options).closest('.formOptions').find('.helperText').css('display','none');
214            isFormOptionsValid = false;
215          }
216          else{
217            $(options).closest('.formOptions').find('.error-msg-checkbox').css('display','none');
218            $(options).closest('.formOptions').find('.error-msg-radio').css('display','none');
219            $(options).closest('.formOptions').find('.helperText').css('display','block');
220          }
221        }
222      }
223      else if(isSelectable){
224        let isSelected = true;
225        reqOptions && $(reqOptions).each((index,opt) => {
226          if((!$(opt).find('select').val() || !$(opt).find('select').val().length) &&
227          !$(opt).find('select').prop('disabled')){
228            isSelected = false;

229          }
230        });
231        if($(options).css("display") != 'none') {
232          if(!isSelected){
233            $(options).closest('.formOptions').find('.floating-label-wrap').addClass("errfld");
234            $(options).closest('.formOptions').find('.error-msg-checkbox').css('display','block');
235            $(options).closest('.formOptions').find('.helperText').css('display','none');
236            isFormOptionsValid = false;
237          }
238          else{
239            $(options).closest('.formOptions').find('.floating-label-wrap').removeClass("errfld");
240            $(options).closest('.formOptions').find('.error-msg-checkbox').css('display','none');
241            $(options).closest('.formOptions').find('.helperText').css('display','block');
242          }
243        }
244      }
245    });
246    formTexts && $(formTexts).each((index,texts) => {
247    const reqInputs = $(texts).find('.required');
248      reqInputs && $(reqInputs).each((index,inp) => {
249        //For all required
250        if(!$(reqInputs).val() && !$(reqInputs).prop('disabled')){ 
251          $(reqInputs).closest('.formText').find('.textError').css('display','block');
252          $(reqInputs).closest('.formText').find('.helperText').css('display','none');
253          $(reqInputs).closest('.formText').find('.charCounter').css("color","#E31C3D");
254          $(reqInputs).css("border","1px solid #E31C3D");
255          $(reqInputs).addClass("errfld");
256          isFormTextsValid = false;
257        }
258        else{
259          $(reqInputs).closest('.formText').find('.textError').css('display','none');
260          $(reqInputs).closest('.formText').find('.helperText').css('display','none');
261          $(reqInputs).closest('.formText').find('.emailhelpmsg.helperText').css('display','none');
262          $(reqInputs).remove("errfld");
263          $(reqInputs).closest('.formText').find('.charCounter').css("color","#5B616B");
264          $(reqInputs).closest('.formText').find('.floating-label').css("color","#00B451");
265          $(reqInputs).css("border","1px solid #00B451");
266        }
267      });
268      //For Email
269      const emailInputs = $(texts).find('.typeEmail');
270      emailInputs && $(emailInputs).each((index,inp) => {
271        if($(emailInputs).val()){
272          const emailregx = /^\w+([-+.']?[^\s]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
273          const emailValue = $(inp).val();
274          //console.log(emailValue);
275          const emailFormat = emailregx.test(emailValue);
276          if (!emailFormat) {
277            $(emailInputs).closest(".formText").find('.helperText').css('display','none');
278            $(emailInputs).closest('.formText').find('.textError').css('display','none');
279            $(emailInputs).closest(".formText").find('.emailhelpmsg.helperText').css('display','block');
280            $(emailInputs).closest(".formText").find('.emailhelpmsg.helperText').css("color","#E31C3D");
281            $(emailInputs).closest('.formText').find('.charCounter').css("color","#E31C3D");
282            $(emailInputs).css("border","1px solid #E31C3D");
283            $(emailInputs).addClass("errfld");
284            isFormTextsValid = false;
285          }
286          else{
287            $(emailInputs).closest(".formText").find('.helperText').css('display','block');
288            $(emailInputs).closest(".formText").find('.emailhelpmsg.helperText').css('display','none');
289          }    
290        }
291      });
292      //For Number
293      const numInputs = $(texts).find('.typeTel');
294      numInputs && $(numInputs).each((index,inp) => {
295        if($(numInputs).val()){
296          const maxValue = $(inp).attr('maxlength'); // from dialogue
297          const minValue = $(inp).attr('min-length'); // from dialogue
298          const typeTel = $(inp).val();
299          if((minValue && typeTel.length < parseInt(minValue)) || (maxValue && typeTel.length > parseInt(maxValue)) || isNaN(typeTel)) {
300              $(numInputs).closest(".formText").find('.helperText').css('display','none');
301              $(numInputs).closest('.formText').find('.textError').css('display','none');
302              $(numInputs).closest(".formText").find('.emailhelpmsg.helperText').css('display','block');
303              $(numInputs).closest(".formText").find('.emailhelpmsg.helperText').css("color","#E31C3D");
304              $(numInputs).closest('.formText').find('.charCounter').css("color","#E31C3D");

305              $(numInputs).css("border","1px solid #E31C3D");
306              $(numInputs).addClass("errfld");
307              isFormTextsValid = false;
308          }
309          else{
310              $(numInputs).closest(".formText").find('.helperText').css('display','block');
311              $(numInputs).closest(".formText").find('.emailhelpmsg.helperText').css('display','none');
312          }    
313        }
314      });
315    });
316    return isFormTextsValid && isFormOptionsValid;
317  }
318});