← All changes | js/formidable.js +788 -574 6.3.2 → 6.20 View file →

		@@ -1,84 +1,44 @@
1		-/* exported frmRecaptcha, frmAfterRecaptcha, frmUpdateField, frmDeleteEntry, frmOnSubmit, frm_resend_email */
	1	+/* exported frmRecaptcha, frmAfterRecaptcha */
	2	+/* eslint-disable prefer-const */
2	3
3		-var frmFrontForm;
4		-
5	4	function frmFrontFormJS() {
6	5	'use strict';
7	6
8		- /*global jQuery:false, frm_js, grecaptcha, frmProForm, tinyMCE */
	7	+ /*global jQuery:false, frm_js, grecaptcha, hcaptcha, turnstile, frmProForm, tinyMCE */
9	8	/*global frmThemeOverride_jsErrors, frmThemeOverride_frmPlaceError, frmThemeOverride_frmAfterSubmit */
10	9
11		- var action = '';
12		- var jsErrors = [];
	10	+ let jsErrors = [];
13	11
14	12	/**
15		- * Maybe add polyfills.
16		- *
17		- * @since 5.4
18		- */
19		- function maybeAddPolyfills() {
20		- var i;
21		- if ( ! Element.prototype.matches ) {
22		- // IE9 supports matches but as msMatchesSelector instead.
23		- Element.prototype.matches = Element.prototype.msMatchesSelector;
24		- }
25		-
26		- if ( ! Element.prototype.closest ) {
27		- Element.prototype.closest = function( s ) {
28		- var el = this;
29		-
30		- do {
31		- if ( el.matches( s ) ) {
32		- return el;
33		- }
34		- el = el.parentElement || el.parentNode;
35		- } while ( el !== null && el.nodeType === 1 );
36		-
37		- return null;
38		- };
39		- }
40		-
41		- // NodeList.forEach().
42		- if ( window.NodeList && ! NodeList.prototype.forEach ) {
43		- NodeList.prototype.forEach = function( callback, thisArg ) {
44		- thisArg = thisArg || window;
45		- for ( i = 0; i < this.length; i++ ) {
46		- callback.call( thisArg, this[ i ], i, this );
47		- }
48		- };
49		- }
50		- }
51		-
52		- /**
53	13	* Triggers custom JS event.
54	14	*
55	15	* @since 5.5.3
56	16	*
57	17	* @param {HTMLElement} el The HTML element.
58		- * @param {String} eventName Event name.
	18	+ * @param {string} eventName Event name.
59	19	* @param {mixed} data The passed data.
60	20	*/
61	21	function triggerCustomEvent( el, eventName, data ) {
62		- var event;
63		-
64		- if ( typeof window.CustomEvent === 'function' ) {
65		- event = new CustomEvent( eventName );
66		- } else if ( document.createEvent ) {
67		- event = document.createEvent( 'HTMLEvents' );
68		- event.initEvent( eventName, false, true );
69		- } else {
	22	+ if ( typeof window.CustomEvent !== 'function' ) {
70	23	return;
71	24	}
72	25
	26	+ const event = new CustomEvent( eventName );
73	27	event.frmData = data;
74	28
75	29	el.dispatchEvent( event );
76	30	}
77	31
78		- /* Get the ID of the field that changed*/
	32	+ /**
	33	+ * Get the ID of the field that changed.
	34	+ *
	35	+ * @param {HTMLElement|jQuery} field
	36	+ * @param {boolean} fullID
	37	+ * @return {string|number} Field ID.
	38	+ */
79	39	function getFieldId( field, fullID ) {
80		- var nameParts, fieldId,
	40	+ let nameParts, fieldId,
81	41	isRepeating = false,
82	42	fieldName = '';
83	43	if ( field instanceof jQuery ) {
84	44	fieldName = field.attr( 'name' );
		@@ -126,9 +86,9 @@
126	86	return 0;
127	87	}
128	88
129	89	// Check if 'this' is in a repeating section
130		- if ( jQuery( 'input[name="item_meta[' + fieldId + '][form]"]' ).length ) {
	90	+ if ( document.querySelector( 'input[name="item_meta[' + fieldId + '][form]"]' ) ) {
131	91
132	92	// this is a repeatable section with name: item_meta[repeating-section-id][row-id][field-id]
133	93	fieldId = nameParts[2].replace( '[', '' );
134	94	isRepeating = true;
		@@ -161,12 +121,12 @@
161	121	* Disable the submit button for a given jQuery form object
162	122	*
163	123	* @since 2.03.02
164	124	*
165		- * @param {object} $form
	125	+ * @param {Object} $form
166	126	*/
167	127	function disableSubmitButton( $form ) {
168		- $form.find( 'input[type="submit"], input[type="button"], button[type="submit"]' ).attr( 'disabled', 'disabled' );
	128	+ $form.find( 'input[type="submit"], input[type="button"], button[type="submit"], button.frm_save_draft' ).attr( 'disabled', 'disabled' );
169	129	}
170	130
171	131	/**
172	132	* Enable the submit button for a given jQuery form object
		@@ -172,9 +132,9 @@
172	132	* Enable the submit button for a given jQuery form object
173	133	*
174	134	* @since 2.03.02
175	135	*
176		- * @param {object} $form
	136	+ * @param {Object} $form
177	137	*/
178	138	function enableSubmitButton( $form ) {
179	139	$form.find( 'input[type="submit"], input[type="button"], button[type="submit"]' ).prop( 'disabled', false );
180	140	}
		@@ -183,9 +143,9 @@
183	143	* Disable the save draft link for a given jQuery form object
184	144	*
185	145	* @since 4.04.03
186	146	*
187		- * @param {object} $form
	147	+ * @param {Object} $form
188	148	*/
189	149	function disableSaveDraft( $form ) {
190	150	$form.find( 'a.frm_save_draft' ).css( 'pointer-events', 'none' );
191	151	}
		@@ -194,91 +154,171 @@
194	154	* Enable the save draft link for a given jQuery form object
195	155	*
196	156	* @since 4.04.03
197	157	*
198		- * @param {object} $form
	158	+ * @param {jQuery} $form
199	159	*/
200	160	function enableSaveDraft( $form ) {
201		- $form.find( 'a.frm_save_draft' ).css( 'pointer-events', '' );
	161	+ if ( ! $form.length ) {
	162	+ return;
	163	+ }
	164	+ $form[0].querySelectorAll( '.frm_save_draft' ).forEach( saveDraftButton => {
	165	+ saveDraftButton.disabled = false;
	166	+ saveDraftButton.style.pointerEvents = '';
	167	+ });
202	168	}
203	169
	170	+ /**
	171	+ * Validate form with JS.
	172	+ *
	173	+ * @param {HTMLElement|jQuery} object
	174	+ * @return {Array} Errors.
	175	+ */
204	176	function validateForm( object ) {
205		- var r, rl, n, nl, fields, field, value, requiredFields,
206		- errors = [];
	177	+ let errors = [];
207	178
208		- // Make sure required text field is filled in
209		- requiredFields = jQuery( object ).find(
210		- '.frm_required_field:visible input, .frm_required_field:visible select, .frm_required_field:visible textarea'
211		- ).filter( ':not(.frm_optional)' );
212		- if ( requiredFields.length ) {
213		- for ( r = 0, rl = requiredFields.length; r < rl; r++ ) {
214		- if ( hasClass( requiredFields[r], 'ed_button' ) ) {
215		- // skip rich text field buttons.
216		- continue;
	179	+ const vanillaJsObject = 'function' === typeof object.get ? object.get( 0 ) : object;
	180	+
	181	+ // Required field validation.
	182	+ vanillaJsObject?.querySelectorAll( '.frm_required_field' ).forEach(
	183	+ requiredField => {
	184	+ const isVisible = requiredField.offsetParent !== null;
	185	+ if ( ! isVisible ) {
	186	+ return;
217	187	}
218		- errors = checkRequiredField( requiredFields[r], errors );
	188	+
	189	+ requiredField.querySelectorAll( 'input, select, textarea' ).forEach(
	190	+ requiredInput => {
	191	+ if ( hasClass( requiredInput, 'frm_optional' ) || hasClass( requiredInput, 'ed_button' ) ) {
	192	+ // skip rich text field buttons.
	193	+ return;
	194	+ }
	195	+
	196	+ errors = checkRequiredField( requiredInput, errors );
	197	+ }
	198	+ );
219	199	}
220		- }
	200	+ );
221	201
222		- fields = jQuery( object ).find( 'input,select,textarea' );
223		- if ( fields.length ) {
224		- for ( n = 0, nl = fields.length; n < nl; n++ ) {
225		- field = fields[n];
226		- if ( '' !== field.value ) {
227		- validateFieldValue( field, errors );
	202	+ vanillaJsObject?.querySelectorAll( 'input,select,textarea' ).forEach(
	203	+ field => {
	204	+ if ( '' === field.value ) {
	205	+ if ( 'number' === field.type ) {
	206	+ // A number field will return an empty string when it is invalid.
	207	+ checkValidity( field, errors );
	208	+ }
	209	+
	210	+ const isConfirmationField = field.name && 0 === field.name.indexOf( 'item_meta[conf_' );
	211	+ if ( ! isConfirmationField ) {
	212	+ // Allow a blank confirmation field to still call validateFieldValue.
	213	+ // If we continue for a confirmation field there are issues with forms submitting with a blank confirmation field.
	214	+ return;
	215	+ }
228	216	}
	217	+
	218	+ validateFieldValue( field, errors, true );
	219	+ checkValidity( field, errors );
229	220	}
	221	+ );
	222	+
	223	+ // Invisible captchas are processed after validation.
	224	+ // We only want to validate a visible captcha on submit.
	225	+ if ( ! hasInvisibleRecaptcha( object ) ) {
	226	+ errors = validateRecaptcha( object, errors );
230	227	}
231	228
232		- errors = validateRecaptcha( object, errors );
	229	+ return errors;
	230	+ }
233	231
234		- return errors;
	232	+ /**
	233	+ * Check the ValidityState interface for the field.
	234	+ * If it is invalid, show an error for it.
	235	+ *
	236	+ * @param {HTMLElement} field
	237	+ * @param {Array} errors
	238	+ * @return {void}
	239	+ */
	240	+ function checkValidity( field, errors ) {
	241	+ let fieldID;
	242	+ if ( 'object' !== typeof field.validity || false !== field.validity.valid ) {
	243	+ return;
	244	+ }
	245	+
	246	+ fieldID = getFieldId( field, true );
	247	+ if ( 'undefined' === typeof errors[ fieldID ]) {
	248	+ errors[ fieldID ] = getFieldValidationMessage( field, 'data-invmsg' );
	249	+ }
	250	+
	251	+ if ( 'function' === typeof field.reportValidity ) {
	252	+ // This triggers an error pop up.
	253	+ field.reportValidity();
	254	+ }
235	255	}
236	256
237	257	/**
238	258	* @since 5.0.10
239	259	*
240		- * @param {object} element
	260	+ * @param {Object} element
241	261	* @param {string} targetClass
242		- * @returns {boolean}
	262	+ * @return {boolean} True if the element has the target class.
243	263	*/
244	264	function hasClass( element, targetClass ) {
245		- var className = ' ' + element.className + ' ';
246		- return -1 !== className.indexOf( ' ' + targetClass + ' ' );
	265	+ return element.classList && element.classList.contains( targetClass );
247	266	}
248	267
	268	+ /**
	269	+ * @param {HTMLElement} field
	270	+ */
249	271	function maybeValidateChange( field ) {
250	272	if ( field.type === 'url' ) {
251	273	maybeAddHttpToUrl( field );
252	274	}
253		- if ( jQuery( field ).closest( 'form' ).hasClass( 'frm_js_validate' ) ) {
	275	+ const form = field.closest( 'form' );
	276	+ if ( form && hasClass( form, 'frm_js_validate' ) ) {
254	277	validateField( field );
255	278	}
256	279	}
257	280
	281	+ /**
	282	+ * @param {HTMLElement} field
	283	+ */
258	284	function maybeAddHttpToUrl( field ) {
259		- var url = field.value;
260		- var matches = url.match( /^(https?|ftps?|mailto|news|feed|telnet):/ );
	285	+ const url = field.value;
	286	+ const matches = url.match( /^(https?|ftps?|mailto|news|feed|telnet):/ );
261	287	if ( field.value !== '' && matches === null ) {
262	288	field.value = 'http://' + url;
263	289	}
264	290	}
265	291
	292	+ /**
	293	+ * Validate a field with JS.
	294	+ *
	295	+ * @param {HTMLElement} field
	296	+ *
	297	+ * @return {void}
	298	+ */
266	299	function validateField( field ) {
267		- var key,
268		- errors = [],
269		- $fieldCont = jQuery( field ).closest( '.frm_form_field' );
	300	+ let errors, key;
270	301
271		- if ( $fieldCont.hasClass( 'frm_required_field' ) && ! jQuery( field ).hasClass( 'frm_optional' ) ) {
	302	+ errors = [];
	303	+ const fieldContainer = field.closest( '.frm_form_field' );
	304	+
	305	+ if ( ! fieldContainer ) {
	306	+ // Hidden fields do not have a field container and do not require JS validation.
	307	+ return;
	308	+ }
	309	+
	310	+ if ( hasClass( fieldContainer, 'frm_required_field' ) && ! hasClass( field, 'frm_optional' ) ) {
272	311	errors = checkRequiredField( field, errors );
273	312	}
274	313
275	314	if ( errors.length < 1 ) {
276		- validateFieldValue( field, errors );
	315	+ validateFieldValue( field, errors, false );
277	316	}
278	317
	318	+ const $fieldCont = jQuery( fieldContainer );
279	319	removeFieldError( $fieldCont );
280		- if ( Object.keys( errors ).length > 0 ) {
	320	+ if ( Object.keys( errors ).length > 0 ) {
281	321	for ( key in errors ) {
282	322	addFieldError( $fieldCont, key, errors );
283	323	}
284	324	}
		@@ -283,17 +323,26 @@
283	323	}
284	324	}
285	325	}
286	326
287		- function validateFieldValue( field, errors ) {
	327	+ /**
	328	+ * Validates a field value.
	329	+ *
	330	+ * @since 6.15 Added `onSubmit` parameter.
	331	+ *
	332	+ * @param {HTMLElement} field Field input.
	333	+ * @param {Object} errors Errors data.
	334	+ * @param {boolean} onSubmit Is `true` if the form is being submitted.
	335	+ */
	336	+ function validateFieldValue( field, errors, onSubmit ) {
288	337	if ( field.type === 'hidden' ) {
289	338	// don't validate
290	339	} else if ( field.type === 'number' ) {
291	340	checkNumberField( field, errors );
292	341	} else if ( field.type === 'email' ) {
293		- checkEmailField( field, errors );
	342	+ checkEmailField( field, errors, onSubmit );
294	343	} else if ( field.type === 'password' ) {
295		- checkPasswordField( field, errors );
	344	+ checkPasswordField( field, errors, onSubmit );
296	345	} else if ( field.type === 'url' ) {
297	346	checkUrlField( field, errors );
298	347	} else if ( field.pattern !== null ) {
299	348	checkPatternField( field, errors );
		@@ -298,16 +347,25 @@
298	347	} else if ( field.pattern !== null ) {
299	348	checkPatternField( field, errors );
300	349	}
301	350
	351	+ /**
	352	+ * @since 6.15 Added `onSubmit` to the data.
	353	+ */
302	354	triggerCustomEvent( document, 'frm_validate_field_value', {
303	355	field: field,
304		- errors: errors
	356	+ errors: errors,
	357	+ onSubmit: onSubmit
305	358	});
306	359	}
307	360
	361	+ /**
	362	+ * @param {HTMLElement} field
	363	+ * @param {Array} errors
	364	+ * @return {Array} Errors
	365	+ */
308	366	function checkRequiredField( field, errors ) {
309		- var checkGroup, tempVal, i, placeholder,
	367	+ let tempVal, i, placeholder,
310	368	val = '',
311	369	fieldID = '',
312	370	fileID = field.getAttribute( 'data-frmfile' );
313	371
		@@ -315,12 +373,19 @@
315	373	return errors;
316	374	}
317	375
318	376	if ( field.type === 'checkbox' || field.type === 'radio' ) {
319		- checkGroup = jQuery( 'input[name="' + field.name + '"]' ).closest( '.frm_required_field' ).find( 'input:checked' );
320		- jQuery( checkGroup ).each( function() {
321		- val = this.value;
322		- });
	377	+ document.querySelectorAll( 'input[name="' + field.name + '"]' ).forEach( function( input ) {
	378	+ const requiredField = input.closest( '.frm_required_field' );
	379	+ if ( ! requiredField ) {
	380	+ return;
	381	+ }
	382	+
	383	+ const checkedInputs = requiredField.querySelectorAll( 'input:checked' );
	384	+ checkedInputs.forEach( function( checkedInput ) {
	385	+ val = checkedInput.value;
	386	+ } );
	387	+ } );
323	388	} else if ( field.type === 'file' || fileID ) {
324	389	if ( typeof fileID === 'undefined' ) {
325	390	fileID = getFieldId( field, true );
326	391	fileID = fileID.replace( 'file', '' );
		@@ -358,8 +423,14 @@
358	423	} else {
359	424	fieldID = getFieldId( field, true );
360	425	}
361	426
	427	+ // Make sure fieldID is a string.
	428	+ // fieldID may be a number which doesn't include a .replace function.
	429	+ if ( 'function' !== typeof fieldID.replace ) {
	430	+ fieldID = fieldID.toString();
	431	+ }
	432	+
362	433	if ( hasClass( field, 'frm_time_select' ) ) {
363	434	// set id for time field
364	435	fieldID = fieldID.replace( '-H', '' ).replace( '-m', '' );
365	436	} else if ( isSignatureField( field ) ) {
		@@ -386,23 +457,39 @@
386	457
387	458	return errors;
388	459	}
389	460
	461	+ /**
	462	+ * @param {HTMLElement} field
	463	+ * @return {boolean} True if the input is a typed signature input.
	464	+ */
390	465	function isSignatureField( field ) {
391		- var name = field.getAttribute( 'name' );
	466	+ const name = field.getAttribute( 'name' );
392	467	return 'string' === typeof name && '[typed]' === name.substr( -7 );
393	468	}
394	469
	470	+ /**
	471	+ * @param {HTMLElement} field
	472	+ * @return {boolean} True if the field is a SSA appointment field.
	473	+ */
395	474	function isAppointmentField( field ) {
396	475	return hasClass( field, 'ssa_appointment_form_field_appointment_id' );
397	476	}
398	477
	478	+ /**
	479	+ * @param {HTMLElement} field
	480	+ * @return {boolean} True if the field is inline datepicker field.
	481	+ */
399	482	function isInlineDatepickerField( field ) {
400	483	return 'hidden' === field.type && '_alt' === field.id.substr( -4 ) && hasClass( field.nextElementSibling, 'frm_date_inline' );
401	484	}
402	485
	486	+ /**
	487	+ * @param {string|number} fileID
	488	+ * @return {string} File input value.
	489	+ */
403	490	function getFileVals( fileID ) {
404		- var val = '',
	491	+ let val = '',
405	492	fileFields = jQuery( 'input[name="file' + fileID + '"], input[name="file' + fileID + '[]"], input[name^="item_meta[' + fileID + ']"]' );
406	493
407	494	fileFields.each( function() {
408	495	if ( val === '' ) {
		@@ -411,10 +498,15 @@
411	498	});
412	499	return val;
413	500	}
414	501
	502	+ /**
	503	+ * @param {HTMLElement} field
	504	+ * @param {Array} errors
	505	+ * @return {void}
	506	+ */
415	507	function checkUrlField( field, errors ) {
416		- var fieldID,
	508	+ let fieldID,
417	509	url = field.value;
418	510
419	511	if ( url !== '' && ! /^http(s)?:\/\/(?:localhost|(?:[\da-z\.-]+\.[\da-z\.-]+))/i.test( url ) ) {
420	512	fieldID = getFieldId( field, true );
		@@ -423,10 +515,42 @@
423	515	}
424	516	}
425	517	}
426	518
427		- function checkEmailField( field, errors ) {
428		- var fieldID = getFieldId( field, true ),
	519	+ /**
	520	+ * Checks if the confirm field should be checked.
	521	+ *
	522	+ * @since 6.15
	523	+ *
	524	+ * @param {HTMLElement} field Field input.
	525	+ * @param {boolean} onSubmit Is `true` if the form is being submitted.
	526	+ * @return {boolean} True if we should confirm the field.
	527	+ */
	528	+ function shouldCheckConfirmField( field, onSubmit ) {
	529	+ if ( onSubmit ) {
	530	+ // Always check on submitting.
	531	+ return true;
	532	+ }
	533	+
	534	+ if ( 0 === field.id.indexOf( 'field_conf_' ) ) {
	535	+ // Always check if it's the confirm field.
	536	+ return true;
	537	+ }
	538	+
	539	+ return false;
	540	+ }
	541	+
	542	+ /**
	543	+ * Check the email field for errors.
	544	+ *
	545	+ * @since 6.15 Added `onSubmit` parameter.
	546	+ *
	547	+ * @param {HTMLElement} field Field input.
	548	+ * @param {Object} errors Errors data.
	549	+ * @param {boolean} onSubmit Is `true` if the form is being submitted.
	550	+ */
	551	+ function checkEmailField( field, errors, onSubmit ) {
	552	+ const fieldID = getFieldId( field, true ),
429	553	pattern = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/i;
430	554
431	555	// validate the current field we're editing first
432	556	if ( '' !== field.value && pattern.test( field.value ) === false ) {
		@@ -432,17 +556,35 @@
432	556	if ( '' !== field.value && pattern.test( field.value ) === false ) {
433	557	errors[ fieldID ] = getFieldValidationMessage( field, 'data-invmsg' );
434	558	}
435	559
436		- confirmField( field, errors );
	560	+ if ( shouldCheckConfirmField( field, onSubmit ) ) {
	561	+ confirmField( field, errors );
	562	+ }
437	563	}
438	564
439		- function checkPasswordField( field, errors ) {
440		- confirmField( field, errors );
	565	+ /**
	566	+ * Check the password field for errors.
	567	+ *
	568	+ * @since 6.15 Added `onSubmit` parameter.
	569	+ *
	570	+ * @param {HTMLElement} field Field input.
	571	+ * @param {Object} errors Errors data.
	572	+ * @param {boolean} onSubmit Is `true` if the form is being submitted.
	573	+ */
	574	+ function checkPasswordField( field, errors, onSubmit ) {
	575	+ if ( shouldCheckConfirmField( field, onSubmit ) ) {
	576	+ confirmField( field, errors );
	577	+ }
441	578	}
442	579
	580	+ /**
	581	+ * @param {HTMLElement} field
	582	+ * @param {Array} errors
	583	+ * @return {void}
	584	+ */
443	585	function confirmField( field, errors ) {
444		- var value, confirmValue, firstField,
	586	+ let value, confirmValue, firstField,
445	587	fieldID = getFieldId( field, true ),
446	588	strippedId = field.id.replace( 'conf_', '' ),
447	589	strippedFieldID = fieldID.replace( 'conf_', '' ),
448	590	confirmField = document.getElementById( strippedId.replace( 'field_', 'field_conf_' ) );
		@@ -454,9 +596,9 @@
454	596	if ( fieldID !== strippedFieldID ) {
455	597	firstField = document.getElementById( strippedId );
456	598	value = firstField.value;
457	599	confirmValue = confirmField.value;
458		- if ( '' !== value && '' !== confirmValue && value !== confirmValue ) {
	600	+ if ( value !== confirmValue ) {
459	601	errors[ 'conf_' + strippedFieldID ] = getFieldValidationMessage( confirmField, 'data-confmsg' );
460	602	}
461	603	} else {
462	604	validateField( confirmField );
		@@ -462,10 +604,15 @@
462	604	validateField( confirmField );
463	605	}
464	606	}
465	607
	608	+ /**
	609	+ * @param {HTMLElement} field
	610	+ * @param {Array} errors
	611	+ * @return {void}
	612	+ */
466	613	function checkNumberField( field, errors ) {
467		- var fieldID,
	614	+ let fieldID,
468	615	number = field.value;
469	616
470	617	if ( number !== '' && isNaN( number / 1 ) !== false ) {
471	618	fieldID = getFieldId( field, true );
		@@ -474,10 +621,15 @@
474	621	}
475	622	}
476	623	}
477	624
	625	+ /**
	626	+ * @param {HTMLElement} field
	627	+ * @param {Array} errors
	628	+ * @return {void}
	629	+ */
478	630	function checkPatternField( field, errors ) {
479		- var fieldID,
	631	+ let fieldID,
480	632	text = field.value,
481	633	format = getFieldValidationMessage( field, 'pattern' );
482	634
483	635	if ( format !== '' && text !== '' ) {
		@@ -482,18 +634,65 @@
482	634
483	635	if ( format !== '' && text !== '' ) {
484	636	fieldID = getFieldId( field, true );
485	637	if ( ! ( fieldID in errors ) ) {
486		- format = new RegExp( '^' + format + '$', 'i' );
487		- if ( format.test( text ) === false ) {
488		- errors[ fieldID ] = getFieldValidationMessage( field, 'data-invmsg' );
	638	+ if ( 'object' === typeof window.frmProForm && 'function' === typeof window.frmProForm.isIntlPhoneInput && window.frmProForm.isIntlPhoneInput( field ) ) {
	639	+ if ( ! window.frmProForm.validateIntlPhoneInput( field ) ) {
	640	+ errors[ fieldID ] = getFieldValidationMessage( field, 'data-invmsg' );
	641	+ }
	642	+ } else {
	643	+ format = new RegExp( '^' + format + '$', 'i' );
	644	+ if ( format.test( text ) === false ) {
	645	+ errors[ fieldID ] = getFieldValidationMessage( field, 'data-invmsg' );
	646	+ }
489	647	}
490	648	}
491	649	}
492	650	}
493	651
	652	+ /**
	653	+ * Set color for select placeholders.
	654	+ *
	655	+ * @since 6.5.1
	656	+ */
	657	+ function setSelectPlaceholderColor() {
	658	+ let selects = document.querySelectorAll( '.form-field select' ),
	659	+ styleElement = document.querySelector( '.with_frm_style' ),
	660	+ textColorDisabled = styleElement ? getComputedStyle( styleElement ).getPropertyValue( '--text-color-disabled' ).trim() : '',
	661	+ changeSelectColor;
	662	+
	663	+ // Exit if there are no select elements or the textColorDisabled property is missing
	664	+ if ( ! selects.length || ! textColorDisabled ) {
	665	+ return;
	666	+ }
	667	+
	668	+ // Function to change the color of a select element
	669	+ changeSelectColor = function( select ) {
	670	+ if ( select.options[select.selectedIndex] && hasClass( select.options[select.selectedIndex], 'frm-select-placeholder' ) ) {
	671	+ select.style.setProperty( 'color', textColorDisabled, 'important' );
	672	+ } else {
	673	+ select.style.color = '';
	674	+ }
	675	+ };
	676	+
	677	+ // Use a loop to iterate through each select element
	678	+ Array.prototype.forEach.call( selects, function( select ) {
	679	+ // Apply the color change to each select element
	680	+ changeSelectColor( select );
	681	+
	682	+ // Add an event listener for future changes
	683	+ select.addEventListener( 'change', function() {
	684	+ changeSelectColor( select );
	685	+ });
	686	+ });
	687	+ }
	688	+
	689	+ /**
	690	+ * @param {HTMLElement|jQuery} object
	691	+ * @return {boolean} True if there is an invisible recaptcha.
	692	+ */
494	693	function hasInvisibleRecaptcha( object ) {
495		- var recaptcha, recaptchaID, alreadyChecked;
	694	+ let recaptcha, recaptchaID, alreadyChecked;
496	695
497	696	if ( isGoingToPrevPage( object ) ) {
498	697	return false;
499	698	}
		@@ -503,73 +702,106 @@
503	702	recaptchaID = recaptcha.data( 'rid' );
504	703	alreadyChecked = grecaptcha.getResponse( recaptchaID );
505	704	if ( alreadyChecked.length === 0 ) {
506	705	return recaptcha;
507		- } else {
508		- return false;
509	706	}
510		- } else {
511		- return false;
512	707	}
	708	+ return false;
513	709	}
514	710
	711	+ /**
	712	+ * @param {jQuery} invisibleRecaptcha
	713	+ */
515	714	function executeInvisibleRecaptcha( invisibleRecaptcha ) {
516		- var recaptchaID = invisibleRecaptcha.data( 'rid' );
	715	+ const recaptchaID = invisibleRecaptcha.data( 'rid' );
517	716	grecaptcha.reset( recaptchaID );
518	717	grecaptcha.execute( recaptchaID );
519	718	}
520	719
521	720	function validateRecaptcha( form, errors ) {
522		- var recaptchaID, response, fieldContainer, fieldID,
523		- $recaptcha = jQuery( form ).find( '.frm-g-recaptcha' );
524		- if ( $recaptcha.length ) {
525		- recaptchaID = $recaptcha.data( 'rid' );
	721	+ let response;
526	722
527		- try {
528		- response = grecaptcha.getResponse( recaptchaID );
529		- } catch ( e ) {
530		- if ( jQuery( form ).find( 'input[name="recaptcha_checked"]' ).length ) {
531		- return errors;
532		- } else {
533		- response = '';
534		- }
	723	+ const $recaptcha = jQuery( form ).find( '.frm-g-recaptcha' );
	724	+ if ( ! $recaptcha.length ) {
	725	+ return errors;
	726	+ }
	727	+
	728	+ const recaptchaID = $recaptcha.data( 'rid' );
	729	+
	730	+ try {
	731	+ response = grecaptcha.getResponse( recaptchaID );
	732	+ } catch ( e ) {
	733	+ if ( jQuery( form ).find( 'input[name="recaptcha_checked"]' ).length ) {
	734	+ return errors;
535	735	}
	736	+ response = '';
	737	+ }
536	738
537		- if ( response.length === 0 ) {
538		- fieldContainer = $recaptcha.closest( '.frm_form_field' );
539		- fieldID = fieldContainer.attr( 'id' ).replace( 'frm_field_', '' ).replace( '_container', '' );
540		- errors[ fieldID ] = '';
541		- }
	739	+ if ( response.length === 0 ) {
	740	+ const fieldContainer = $recaptcha.closest( '.frm_form_field' );
	741	+ const fieldID = fieldContainer.attr( 'id' ).replace( 'frm_field_', '' ).replace( '_container', '' );
	742	+ errors[ fieldID ] = '';
542	743	}
	744	+
543	745	return errors;
544	746	}
545	747
	748	+ /**
	749	+ * @param {HTMLElement} field
	750	+ * @param {string} messageType
	751	+ * @return {string} The error message to display.
	752	+ */
546	753	function getFieldValidationMessage( field, messageType ) {
547		- var msg, errorHtml;
548		-
549		- msg = field.getAttribute( messageType );
	754	+ let msg = field.getAttribute( messageType );
550	755	if ( null === msg ) {
551	756	msg = '';
552	757	}
553	758
554	759	if ( '' !== msg && shouldWrapErrorHtmlAroundMessageType( messageType ) ) {
555		- errorHtml = field.getAttribute( 'data-error-html' );
556		- if ( null !== errorHtml ) {
557		- errorHtml = errorHtml.replace( /\+/g, '%20' );
558		- msg = decodeURIComponent( errorHtml ).replace( '[error]', msg );
559		- msg = msg.replace( '[key]', getFieldId( field, false ) );
560		- }
	760	+ msg = wrapErrorHtml( msg, field );
561	761	}
562	762
563	763	return msg;
564	764	}
565	765
	766	+ /**
	767	+ * @param {string} msg
	768	+ * @param {HTMLElement} field
	769	+ * @return {string} The error HTML to use.
	770	+ */
	771	+ function wrapErrorHtml( msg, field ) {
	772	+ let errorHtml = field.getAttribute( 'data-error-html' );
	773	+ if ( null === errorHtml ) {
	774	+ return msg;
	775	+ }
	776	+
	777	+ errorHtml = errorHtml.replace( /\+/g, '%20' );
	778	+ msg = decodeURIComponent( errorHtml ).replace( '[error]', msg );
	779	+ const fieldId = getFieldId( field, false );
	780	+ const split = fieldId.split( '-' );
	781	+ const fieldIdParts = field.id.split( '_' );
	782	+ fieldIdParts.shift(); // Drop the "field" value from the front.
	783	+ split[0] = fieldIdParts.join( '_' );
	784	+ const errorKey = split.join( '-' );
	785	+ return msg.replace( '[key]', errorKey );
	786	+ }
	787	+
566	788	function shouldWrapErrorHtmlAroundMessageType( type ) {
567	789	return 'pattern' !== type;
568	790	}
569	791
	792	+ /**
	793	+ * Check if JS validation should happen.
	794	+ *
	795	+ * @param {HTMLElement|Object} object Form object.
	796	+ * @return {boolean} True if validation is enabled and we are not saving a draft or going to a previous page.
	797	+ */
570	798	function shouldJSValidate( object ) {
571		- var validate = jQuery( object ).hasClass( 'frm_js_validate' );
	799	+ if ( 'function' === typeof object.get ) {
	800	+ // Get the HTMLElement from a jQuery object.
	801	+ object = object.get( 0 );
	802	+ }
	803	+ let validate = hasClass( object, 'frm_js_validate' );
572	804	if ( validate && typeof frmProForm !== 'undefined' && ( frmProForm.savingDraft( object ) || frmProForm.goingToPreviousPage( object ) ) ) {
573	805	validate = false;
574	806	}
575	807
		@@ -575,15 +807,16 @@
575	807
576	808	return validate;
577	809	}
578	810
	811	+ /**
	812	+ * @param {HTMLElement} object
	813	+ * @param {string} action
	814	+ * @return {void}
	815	+ */
579	816	function getFormErrors( object, action ) {
580		- var fieldset, data, success, error, shouldTriggerEvent;
	817	+ let fieldset, data, success, error, shouldTriggerEvent;
581	818
582		- if ( typeof action === 'undefined' ) {
583		- jQuery( object ).find( 'input[name="frm_action"]' ).val();
584		- }
585		-
586	819	fieldset = jQuery( object ).find( '.frm_form_field' );
587	820	fieldset.addClass( 'frm_doing_ajax' );
588	821
589	822	data = jQuery( object ).serialize() + '&action=frm_entries_' + action + '&nonce=' + frm_js.nonce; // eslint-disable-line camelcase
		@@ -588,11 +821,27 @@
588	821
589	822	data = jQuery( object ).serialize() + '&action=frm_entries_' + action + '&nonce=' + frm_js.nonce; // eslint-disable-line camelcase
590	823	shouldTriggerEvent = object.classList.contains( 'frm_trigger_event_on_submit' );
591	824
	825	+ const doRedirect = response => {
	826	+ jQuery( document ).trigger( 'frmBeforeFormRedirect', [ object, response ]);
	827	+
	828	+ if ( ! response.openInNewTab ) {
	829	+ // We return here because we're redirecting there is no need to update content.
	830	+ window.location = response.redirect;
	831	+ return;
	832	+ }
	833	+
	834	+ // We don't return here because we're opening in a new tab, the old tab will still update.
	835	+ const newTab = window.open( response.redirect, '_blank' );
	836	+ if ( ! newTab && response.fallbackMsg && response.content ) {
	837	+ response.content = response.content.trim().replace( /(<\/div><\/div>)$/, ' ' + response.fallbackMsg + '</div></div>' );
	838	+ }
	839	+ };
	840	+
592	841	success = function( response ) {
593		- var defaultResponse, formID, replaceContent, pageOrder, formReturned, contSubmit, delay,
594		- $fieldCont, key, inCollapsedSection, frmTrigger, newTab;
	842	+ let defaultResponse, formID, replaceContent, pageOrder, formReturned, contSubmit, delay,
	843	+ $fieldCont, key, inCollapsedSection, frmTrigger;
595	844
596	845	defaultResponse = {
597	846	content: '',
598	847	errors: {},
		@@ -600,15 +849,16 @@
600	849	};
601	850
602	851	if ( response === null ) {
603	852	response = defaultResponse;
604		- }
605		-
606		- response = response.replace( /^\s+|\s+$/g, '' );
607		- if ( response.indexOf( '{' ) === 0 ) {
608		- response = JSON.parse( response );
609	853	} else {
610		- response = defaultResponse;
	854	+ // Response is a string. Convert it to an object.
	855	+ response = response.replace( /^\s+|\s+$/g, '' );
	856	+ if ( response.indexOf( '{' ) === 0 ) {
	857	+ response = JSON.parse( response );
	858	+ } else {
	859	+ response = defaultResponse;
	860	+ }
611	861	}
612	862
613	863	if ( typeof response.redirect !== 'undefined' ) {
614	864	if ( shouldTriggerEvent ) {
		@@ -615,28 +865,22 @@
615	865	triggerCustomEvent( object, 'frmSubmitEvent' );
616	866	return;
617	867	}
618	868
619		- jQuery( document ).trigger( 'frmBeforeFormRedirect', [ object, response ]);
620		-
621		- if ( ! response.openInNewTab ) {
622		- // We return here because we're redirecting there is no need to update content.
623		- window.location = response.redirect;
624		- return;
	869	+ if ( response.delay ) {
	870	+ setTimeout( function() {
	871	+ doRedirect( response );
	872	+ }, 1000 * response.delay );
	873	+ } else {
	874	+ doRedirect( response );
625	875	}
626		-
627		- // We don't return here because we're opening in a new tab, the old tab will still update.
628		- newTab = window.open( response.redirect, '_blank' );
629		- if ( ! newTab && response.fallbackMsg && response.content ) {
630		- response.content = response.content.trim().replace( /(<\/div><\/div>)$/, ' ' + response.fallbackMsg + '</div></div>' );
631		- }
632	876	}
633	877
634		- if ( response.content !== '' ) {
	878	+ if ( 'string' === typeof response.content && response.content !== '' ) {
635	879	// the form or success message was returned
636	880
637	881	if ( shouldTriggerEvent ) {
638		- triggerCustomEvent( object, 'frmSubmitEvent' );
	882	+ triggerCustomEvent( object, 'frmSubmitEvent', { content: response.content });
639	883	return;
640	884	}
641	885
642	886	removeSubmitLoading( jQuery( object ) );
		@@ -651,10 +895,12 @@
651	895	delay = maybeSlideOut( replaceContent, response.content );
652	896
653	897	setTimeout(
654	898	function() {
655		- var container, input, previousInput;
	899	+ let container, input, previousInput;
656	900
	901	+ afterFormSubmittedBeforeReplace( object, response );
	902	+
657	903	replaceContent.replaceWith( response.content );
658	904
659	905	addUrlParam( response );
660	906
		@@ -713,9 +959,9 @@
713	959	}
714	960	}
715	961
716	962	jQuery( object ).find( '.frm-g-recaptcha, .g-recaptcha, .h-captcha' ).each( function() {
717		- var $recaptcha = jQuery( this ),
	963	+ const $recaptcha = jQuery( this ),
718	964	recaptchaID = $recaptcha.data( 'rid' );
719	965
720	966	if ( typeof grecaptcha !== 'undefined' && grecaptcha ) {
721	967	if ( recaptchaID ) {
		@@ -728,8 +974,14 @@
728	974	hcaptcha.reset();
729	975	}
730	976	});
731	977
	978	+ if ( window.turnstile ) {
	979	+ object.querySelectorAll( '.cf-turnstile' ).forEach(
	980	+ turnstileField => turnstileField.dataset.rid && turnstile.reset( turnstileField.dataset.rid )
	981	+ );
	982	+ }
	983	+
732	984	jQuery( document ).trigger( 'frmFormErrors', [ object, response ]);
733	985
734	986	fieldset.removeClass( 'frm_doing_ajax' );
735	987	scrollToFirstField( object );
		@@ -736,9 +988,9 @@
736	988
737	989	if ( contSubmit ) {
738	990	object.submit();
739	991	} else {
740		- jQuery( object ).prepend( response.error_message );
	992	+ object.insertAdjacentHTML( 'afterbegin', response.error_message );
741	993	checkForErrorsAndMaybeSetFocus();
742	994	}
743	995	} else {
744	996	// there may have been a plugin conflict, or the form is not set to submit with ajax
		@@ -757,9 +1009,9 @@
757	1009	postToAjaxUrl( object, data, success, error );
758	1010	}
759	1011
760	1012	function postToAjaxUrl( form, data, success, error ) {
761		- var ajaxUrl, action, ajaxParams;
	1013	+ let ajaxUrl, action, ajaxParams;
762	1014
763	1015	ajaxUrl = frm_js.ajax_url; // eslint-disable-line camelcase
764	1016	action = form.getAttribute( 'action' );
765	1017
		@@ -781,9 +1033,9 @@
781	1033	jQuery.ajax( ajaxParams );
782	1034	}
783	1035
784	1036	function afterFormSubmitted( object, response ) {
785		- var formCompleted = jQuery( response.content ).find( '.frm_message' );
	1037	+ const formCompleted = jQuery( response.content ).find( '.frm_message' );
786	1038	if ( formCompleted.length ) {
787	1039	jQuery( document ).trigger( 'frmFormComplete', [ object, response ]);
788	1040	} else {
789	1041	jQuery( document ).trigger( 'frmPageChanged', [ object, response ]);
		@@ -789,10 +1041,26 @@
789	1041	jQuery( document ).trigger( 'frmPageChanged', [ object, response ]);
790	1042	}
791	1043	}
792	1044
	1045	+ /**
	1046	+ * Trigger an event before the form is replaced with a success message.
	1047	+ *
	1048	+ * @since 6.9
	1049	+ *
	1050	+ * @param {HTMLElement} object The form.
	1051	+ * @param {Object} response The response from submitting the form with AJAX.
	1052	+ * @return {void}
	1053	+ */
	1054	+ function afterFormSubmittedBeforeReplace( object, response ) {
	1055	+ const formCompleted = jQuery( response.content ).find( '.frm_message' );
	1056	+ if ( formCompleted.length ) {
	1057	+ triggerCustomEvent( document, 'frmFormCompleteBeforeReplace', { object, response });
	1058	+ }
	1059	+ }
	1060	+
793	1061	function removeAddedScripts( formContainer, formID ) {
794		- var endReplace = jQuery( '.frm_end_ajax_' + formID );
	1062	+ const endReplace = jQuery( '.frm_end_ajax_' + formID );
795	1063	if ( endReplace.length ) {
796	1064	formContainer.nextUntil( '.frm_end_ajax_' + formID ).remove();
797	1065	endReplace.remove();
798	1066	}
		@@ -798,9 +1066,9 @@
798	1066	}
799	1067	}
800	1068
801	1069	function maybeSlideOut( oldContent, newContent ) {
802		- var c,
	1070	+ let c,
803	1071	newClass = 'frm_slideout';
804	1072	if ( newContent.indexOf( ' frm_slide' ) !== -1 ) {
805	1073	c = oldContent.children();
806	1074	if ( newContent.indexOf( ' frm_going_back' ) !== -1 ) {
		@@ -813,9 +1081,9 @@
813	1081	return 0;
814	1082	}
815	1083
816	1084	function addUrlParam( response ) {
817		- var url;
	1085	+ let url;
818	1086	if ( history.pushState && typeof response.page !== 'undefined' ) {
819	1087	url = addQueryVar( 'frm_page', response.page );
820	1088	window.history.pushState({ 'html': response.html }, '', '?' + url );
821	1089	}
		@@ -821,9 +1089,9 @@
821	1089	}
822	1090	}
823	1091
824	1092	function addQueryVar( key, value ) {
825		- var kvp, i, x;
	1093	+ let kvp, i, x;
826	1094
827	1095	key = encodeURI( key );
828	1096	value = encodeURI( value );
829	1097
		@@ -847,13 +1115,14 @@
847	1115	return kvp.join( '&' );
848	1116	}
849	1117
850	1118	function addFieldError( $fieldCont, key, jsErrors ) {
851		- var input, id, describedBy, roleString;
	1119	+ let input, id, describedBy, roleString;
852	1120	if ( $fieldCont.length && $fieldCont.is( ':visible' ) ) {
853	1121	$fieldCont.addClass( 'frm_blank_field' );
854	1122	input = $fieldCont.find( 'input, select, textarea' );
855		- id = 'frm_error_field_' + key;
	1123	+ id = getErrorElementId( key, input.get( 0 ) );
	1124	+
856	1125	describedBy = input.attr( 'aria-describedby' );
857	1126
858	1127	if ( typeof frmThemeOverride_frmPlaceError === 'function' ) { // eslint-disable-line camelcase
859	1128	frmThemeOverride_frmPlaceError( key, jsErrors );
		@@ -884,15 +1153,41 @@
884	1153	jQuery( document ).trigger( 'frmAddFieldError', [ $fieldCont, key, jsErrors ]);
885	1154	}
886	1155	}
887	1156
	1157	+ /**
	1158	+ * Get the ID to use for an error element added when submitting with AJAX.
	1159	+ *
	1160	+ * @param {string} key
	1161	+ * @param {HTMLElement} input
	1162	+ * @return {string} The ID to use for the error element.
	1163	+ */
	1164	+ function getErrorElementId( key, input ) {
	1165	+ if ( isNaN( key ) || ! input || ! input.id ) {
	1166	+ // If key isn't a number, assume it's already in the right format.
	1167	+ return 'frm_error_field_' + key;
	1168	+ }
	1169	+ return 'frm_error_' + input.id;
	1170	+ }
	1171	+
	1172	+ /**
	1173	+ * Removes errors before validating with JS.
	1174	+ * This prevents issues with stale errors that has since been fixed.
	1175	+ *
	1176	+ * @param {Object} $fieldCont jQuery object.
	1177	+ * @return {void}
	1178	+ */
888	1179	function removeFieldError( $fieldCont ) {
889		- var errorMessage = $fieldCont.find( '.frm_error' ),
890		- errorId = errorMessage.attr( 'id' ),
891		- input = $fieldCont.find( 'input, select, textarea' ),
892		- describedBy = input.attr( 'aria-describedby' );
	1180	+ const errorMessage = $fieldCont.find( '.frm_error' );
	1181	+ const errorId = errorMessage.attr( 'id' );
	1182	+ const input = $fieldCont.find( 'input, select, textarea' );
	1183	+ let describedBy = input.attr( 'aria-describedby' );
893	1184
894		- $fieldCont.removeClass( 'frm_blank_field has-error' );
	1185	+ const fieldContainer = $fieldCont.get( 0 );
	1186	+ if ( fieldContainer && fieldContainer.classList ) {
	1187	+ fieldContainer.classList.remove( 'frm_blank_field', 'has-error' );
	1188	+ }
	1189	+
895	1190	errorMessage.remove();
896	1191	input.attr( 'aria-invalid', false );
897	1192	input.removeAttr( 'aria-describedby' );
898	1193
		@@ -907,13 +1202,21 @@
907	1202	jQuery( '.form-field .frm_error' ).replaceWith( '' );
908	1203	jQuery( '.frm_error_style' ).remove();
909	1204	}
910	1205
	1206	+ /**
	1207	+ * @param {HTMLElement|Object} object Form object.
	1208	+ * @return {void}
	1209	+ */
911	1210	function scrollToFirstField( object ) {
912		- var field = jQuery( object ).find( '.frm_blank_field' ).first();
913		- if ( field.length ) {
914		- frmFrontForm.scrollMsg( field, object, true );
	1211	+ if ( 'function' === typeof object.get ) {
	1212	+ // Get the HTMLElement from a jQuery object.
	1213	+ object = object.get( 0 );
915	1214	}
	1215	+ const field = object.querySelector( '.frm_blank_field' );
	1216	+ if ( field ) {
	1217	+ frmFrontForm.scrollMsg( jQuery( field ), object, true );
	1218	+ }
916	1219	}
917	1220
918	1221	function showSubmitLoading( $object ) {
919	1222	showLoadingIndicator( $object );
		@@ -928,9 +1231,9 @@
928	1231	}
929	1232	}
930	1233
931	1234	function addLoadingClass( $object ) {
932		- var loadingClass = isGoingToPrevPage( $object ) ? 'frm_loading_prev' : 'frm_loading_form';
	1235	+ const loadingClass = isGoingToPrevPage( $object ) ? 'frm_loading_prev' : 'frm_loading_form';
933	1236
934	1237	$object.addClass( loadingClass );
935	1238	}
936	1239
		@@ -937,10 +1240,10 @@
937	1240	function isGoingToPrevPage( $object ) {
938	1241	return ( typeof frmProForm !== 'undefined' && frmProForm.goingToPreviousPage( $object ) );
939	1242	}
940	1243
941		- function removeSubmitLoading( $object, enable, processesRunning ) {
942		- var loadingForm;
	1244	+ function removeSubmitLoading( _, enable, processesRunning ) {
	1245	+ let loadingForm;
943	1246
944	1247	if ( processesRunning > 0 ) {
945	1248	return;
946	1249	}
		@@ -957,9 +1260,9 @@
957	1260	}
958	1261	}
959	1262
960	1263	function showFileLoading( object ) {
961		- var fileval,
	1264	+ let fileval,
962	1265	loading = document.getElementById( 'frm_loading' );
963	1266	if ( loading !== null ) {
964	1267	fileval = jQuery( object ).find( 'input[type=file]' ).val();
965	1268	if ( typeof fileval !== 'undefined' && fileval !== '' ) {
		@@ -969,69 +1272,8 @@
969	1272	}
970	1273	}
971	1274	}
972	1275
973		- function clearDefault() {
974		- /*jshint validthis:true */
975		- toggleDefault( jQuery( this ), 'clear' );
976		- }
977		-
978		- function replaceDefault() {
979		- /*jshint validthis:true */
980		- toggleDefault( jQuery( this ), 'replace' );
981		- }
982		-
983		- function toggleDefault( $thisField, e ) {
984		- // TODO: Fix this for a default value that is a number or array
985		- var thisVal,
986		- v = $thisField.data( 'frmval' ).replace( /(\n|\r\n)/g, '\r' );
987		- if ( v === '' || typeof v === 'undefined' ) {
988		- return false;
989		- }
990		- thisVal = $thisField.val().replace( /(\n|\r\n)/g, '\r' );
991		-
992		- if ( 'replace' === e ) {
993		- if ( thisVal === '' ) {
994		- $thisField.addClass( 'frm_default' ).val( v );
995		- }
996		- } else if ( thisVal == v ) {
997		- $thisField.removeClass( 'frm_default' ).val( '' );
998		- }
999		- }
1000		-
1001		- function resendEmail() {
1002		- /*jshint validthis:true */
1003		- var $link = jQuery( this ),
1004		- entryId = this.getAttribute( 'data-eid' ),
1005		- formId = this.getAttribute( 'data-fid' ),
1006		- label = $link.find( '.frm_link_label' );
1007		- if ( label.length < 1 ) {
1008		- label = $link;
1009		- }
1010		- label.append( '<span class="frm-wait"></span>' );
1011		-
1012		- jQuery.ajax({
1013		- type: 'POST',
1014		- url: frm_js.ajax_url, // eslint-disable-line camelcase
1015		- data: {
1016		- action: 'frm_entries_send_email',
1017		- entry_id: entryId,
1018		- form_id: formId,
1019		- nonce: frm_js.nonce // eslint-disable-line camelcase
1020		- },
1021		- success: function( msg ) {
1022		- var admin = document.getElementById( 'wpbody' );
1023		- if ( admin === null ) {
1024		- label.html( msg );
1025		- } else {
1026		- label.html( '' );
1027		- $link.after( msg );
1028		- }
1029		- }
1030		- });
1031		- return false;
1032		- }
1033		-
1034	1276	/**********************************************
1035	1277	* General Helpers
1036	1278	*********************************************/
1037	1279
		@@ -1036,68 +1278,12 @@
1036	1278	*********************************************/
1037	1279
1038	1280	function confirmClick() {
1039	1281	/*jshint validthis:true */
1040		- var message = jQuery( this ).data( 'frmconfirm' );
	1282	+ const message = jQuery( this ).data( 'frmconfirm' );
1041	1283	return confirm( message );
1042	1284	}
1043	1285
1044		- function toggleDiv() {
1045		- /*jshint validthis:true */
1046		- var div = jQuery( this ).data( 'frmtoggle' );
1047		- if ( jQuery( div ).is( ':visible' ) ) {
1048		- jQuery( div ).slideUp( 'fast' );
1049		- } else {
1050		- jQuery( div ).slideDown( 'fast' );
1051		- }
1052		- return false;
1053		- }
1054		-
1055		- /**********************************************
1056		- * Fallback functions
1057		- *********************************************/
1058		-
1059		- function addTrimFallbackForIE() {
1060		- if ( typeof String.prototype.trim !== 'function' ) {
1061		- String.prototype.trim = function() {
1062		- return this.replace( /^\s+|\s+$/g, '' );
1063		- };
1064		- }
1065		- }
1066		-
1067		- function addFilterFallbackForIE() {
1068		- var t, len, res, thisp, i, val;
1069		-
1070		- if ( ! Array.prototype.filter ) {
1071		-
1072		- Array.prototype.filter = function( fun /*, thisp */ ) {
1073		-
1074		- if ( this === void 0 || this === null ) {
1075		- throw new TypeError();
1076		- }
1077		-
1078		- t = Object( this );
1079		- len = t.length >>> 0;
1080		- if ( typeof fun !== 'function' ) {
1081		- throw new TypeError();
1082		- }
1083		-
1084		- res = [];
1085		- thisp = arguments[1];
1086		- for ( i = 0; i < len; i++ ) {
1087		- if ( i in t ) {
1088		- val = t[i]; // in case fun mutates this
1089		- if ( fun.call( thisp, val, i, t ) ) {
1090		- res.push( val );
1091		- }
1092		- }
1093		- }
1094		-
1095		- return res;
1096		- };
1097		- }
1098		- }
1099		-
1100	1286	/**
1101	1287	* Check for -webkit-box-shadow css value for input:-webkit-autofill selector.
1102	1288	* If this is a match, the User is autofilling the input on a Webkit browser.
1103	1289	* We want to delete the Honeypot field, otherwise it will get triggered as spam on autocomplete.
		@@ -1102,9 +1288,9 @@
1102	1288	* If this is a match, the User is autofilling the input on a Webkit browser.
1103	1289	* We want to delete the Honeypot field, otherwise it will get triggered as spam on autocomplete.
1104	1290	*/
1105	1291	function onHoneypotFieldChange() {
1106		- var css = jQuery( this ).css( 'box-shadow' );
	1292	+ const css = jQuery( this ).css( 'box-shadow' );
1107	1293	if ( css.match( /inset/ ) ) {
1108	1294	this.parentNode.removeChild( this );
1109	1295	}
1110	1296	}
		@@ -1112,17 +1298,9 @@
1112	1298	function maybeMakeHoneypotFieldsUntabbable() {
1113	1299	document.addEventListener( 'keydown', handleKeyUp );
1114	1300
1115	1301	function handleKeyUp( event ) {
1116		- var code;
1117		-
1118		- if ( 'undefined' !== typeof event.key ) {
1119		- code = event.key;
1120		- } else if ( 'undefined' !== typeof event.keyCode && 9 === event.keyCode ) {
1121		- code = 'Tab';
1122		- }
1123		-
1124		- if ( 'Tab' === code ) {
	1302	+ if ( 'Tab' === event.key ) {
1125	1303	makeHoneypotFieldsUntabbable();
1126	1304	document.removeEventListener( 'keydown', handleKeyUp );
1127	1305	}
1128	1306	}
		@@ -1128,11 +1306,10 @@
1128	1306	}
1129	1307
1130	1308	function makeHoneypotFieldsUntabbable() {
1131	1309	document.querySelectorAll( '.frm_verify' ).forEach(
1132		- function( wrapper ) {
1133		- var input = wrapper.querySelector( 'input[id^=frm_email]' );
1134		- if ( input ) {
	1310	+ function( input ) {
	1311	+ if ( input.id && 0 === input.id.indexOf( 'frm_email_' ) ) {
1135	1312	input.setAttribute( 'tabindex', -1 );
1136	1313	}
1137	1314	}
1138	1315	);
		@@ -1144,11 +1321,11 @@
1144	1321	*
1145	1322	* @since 4.10.02
1146	1323	*/
1147	1324	function changeFocusWhenClickComboFieldLabel() {
1148		- var label;
	1325	+ let label;
1149	1326
1150		- var comboInputsContainer = document.querySelectorAll( '.frm_combo_inputs_container' );
	1327	+ const comboInputsContainer = document.querySelectorAll( '.frm_combo_inputs_container' );
1151	1328	comboInputsContainer.forEach( function( inputsContainer ) {
1152	1329	if ( ! inputsContainer.closest( '.frm_form_field' ) ) {
1153	1330	return;
1154	1331	}
		@@ -1157,16 +1334,39 @@
1157	1334	if ( ! label ) {
1158	1335	return;
1159	1336	}
1160	1337
1161		- label.addEventListener( 'click', function( e ) {
	1338	+ label.addEventListener( 'click', function() {
1162	1339	inputsContainer.querySelector( '.frm_form_field:first-child input, .frm_form_field:first-child select, .frm_form_field:first-child textarea' ).focus();
1163	1340	});
1164	1341	});
1165	1342	}
1166	1343
	1344	+ /**
	1345	+ * Sets focus on a the first subfield of a combo field that has an error.
	1346	+ *
	1347	+ * @since 6.16.3
	1348	+ *
	1349	+ * @param {HTMLElement} element
	1350	+ * @return {boolean} True if the focus was set on a combo field.
	1351	+ */
	1352	+ function maybeFocusOnComboSubField( element ) {
	1353	+ if ( 'FIELDSET' !== element.nodeName ) {
	1354	+ return false;
	1355	+ }
	1356	+ if ( ! element.querySelector( '.frm_combo_inputs_container' ) ) {
	1357	+ return false;
	1358	+ }
	1359	+ const comboSubfield = element.querySelector( '[aria-invalid="true"]' );
	1360	+ if ( comboSubfield ) {
	1361	+ focusInput( comboSubfield );
	1362	+ return true;
	1363	+ }
	1364	+ return false;
	1365	+ }
	1366	+
1167	1367	function checkForErrorsAndMaybeSetFocus() {
1168		- var errors, element, timeoutCallback;
	1368	+ let errors, element, timeoutCallback;
1169	1369
1170	1370	if ( ! frm_js.focus_first_error ) { // eslint-disable-line camelcase
1171	1371	return;
1172	1372	}
		@@ -1179,16 +1379,20 @@
1179	1379	element = errors[0];
1180	1380	do {
1181	1381	element = element.previousSibling;
1182	1382	if ( -1 !== [ 'input', 'select', 'textarea' ].indexOf( element.nodeName.toLowerCase() ) ) {
1183		- element.focus();
	1383	+ focusInput( element );
1184	1384	break;
1185	1385	}
1186	1386
	1387	+ if ( maybeFocusOnComboSubField( element ) ) {
	1388	+ break;
	1389	+ }
	1390	+
1187	1391	if ( 'undefined' !== typeof element.classList ) {
1188	1392	if ( element.classList.contains( 'html-active' ) ) {
1189	1393	timeoutCallback = function() {
1190		- var textarea = element.querySelector( 'textarea' );
	1394	+ const textarea = element.querySelector( 'textarea' );
1191	1395	if ( null !== textarea ) {
1192	1396	textarea.focus();
1193	1397	}
1194	1398	};
		@@ -1206,16 +1410,21 @@
1206	1410	} while ( element.previousSibling );
1207	1411	}
1208	1412
1209	1413	/**
1210		- * Checks if is on IE browser.
	1414	+ * Focus a visible input, or possibly delay the focus event until the form has faded in.
1211	1415	*
1212		- * @since 5.4
	1416	+ * @since 6.16.3
1213	1417	*
1214		- * @return {Boolean}
	1418	+ * @param {HTMLElement} input
	1419	+ * @return {void}
1215	1420	*/
1216		- function isIE() {
1217		- return navigator.userAgent.indexOf( 'MSIE' ) > -1 || navigator.userAgent.indexOf( 'Trident' ) > -1;
	1421	+ function focusInput( input ) {
	1422	+ if ( input.offsetParent !== null ) {
	1423	+ input.focus();
	1424	+ } else {
	1425	+ triggerCustomEvent( document, 'frmMaybeDelayFocus', { input });
	1426	+ }
1218	1427	}
1219	1428
1220	1429	/**
1221	1430	* Does the same as jQuery( document ).on( 'event', 'selector', handler ).
		@@ -1221,12 +1430,12 @@
1221	1430	* Does the same as jQuery( document ).on( 'event', 'selector', handler ).
1222	1431	*
1223	1432	* @since 5.4
1224	1433	*
1225		- * @param {String} event Event name.
1226		- * @param {String} selector Selector.
1227		- * @param {Function} handler Handler.
1228		- * @param {Boolean|Object} options Options to be added to `addEventListener()` method. Default is `false`.
	1434	+ * @param {string} event Event name.
	1435	+ * @param {string} selector Selector.
	1436	+ * @param {Function} handler Handler.
	1437	+ * @param {boolean | Object} options Options to be added to `addEventListener()` method. Default is `false`.
1229	1438	*/
1230	1439	function documentOn( event, selector, handler, options ) {
1231	1440	if ( 'undefined' === typeof options ) {
1232	1441	options = false;
		@@ -1232,9 +1441,9 @@
1232	1441	options = false;
1233	1442	}
1234	1443
1235	1444	document.addEventListener( event, function( e ) {
1236		- var target;
	1445	+ let target;
1237	1446
1238	1447	// loop parent nodes from the target to the delegation node.
1239	1448	for ( target = e.target; target && target != this; target = target.parentNode ) {
1240	1449	if ( target && target.matches && target.matches( selector ) ) {
		@@ -1245,15 +1454,15 @@
1245	1454	}, options );
1246	1455	}
1247	1456
1248	1457	function initFloatingLabels() {
1249		- var checkFloatLabel, checkDropdownLabel, checkPlaceholderIE, runOnLoad, selector, floatClass;
	1458	+ let checkFloatLabel, checkDropdownLabel, runOnLoad, selector, floatClass;
1250	1459
1251	1460	selector = '.frm-show-form .frm_inside_container input, .frm-show-form .frm_inside_container select, .frm-show-form .frm_inside_container textarea';
1252	1461	floatClass = 'frm_label_float_top';
1253	1462
1254	1463	checkFloatLabel = function( input ) {
1255		- var container, shouldFloatTop, firstOpt;
	1464	+ let container, shouldFloatTop, firstOpt;
1256	1465
1257	1466	container = input.closest( '.frm_inside_container' );
1258	1467	if ( ! container ) {
1259	1468	return;
		@@ -1270,22 +1479,18 @@
1270	1479	if ( firstOpt.hasAttribute( 'data-label' ) ) {
1271	1480	firstOpt.textContent = firstOpt.getAttribute( 'data-label' );
1272	1481	firstOpt.removeAttribute( 'data-label' );
1273	1482	}
1274		- } else {
1275		- if ( firstOpt.textContent ) {
1276		- firstOpt.setAttribute( 'data-label', firstOpt.textContent );
1277		- firstOpt.textContent = '';
1278		- }
	1483	+ } else if ( firstOpt.textContent ) {
	1484	+ firstOpt.setAttribute( 'data-label', firstOpt.textContent );
	1485	+ firstOpt.textContent = '';
1279	1486	}
1280		- } else if ( isIE() ) {
1281		- checkPlaceholderIE( input );
1282	1487	}
1283	1488	};
1284	1489
1285	1490	checkDropdownLabel = function() {
1286	1491	document.querySelectorAll( '.frm-show-form .frm_inside_container:not(.' + floatClass + ') select' ).forEach( function( input ) {
1287		- var firstOpt = input.querySelector( 'option:first-child' );
	1492	+ const firstOpt = input.querySelector( 'option:first-child' );
1288	1493
1289	1494	if ( firstOpt.textContent ) {
1290	1495	firstOpt.setAttribute( 'data-label', firstOpt.textContent );
1291	1496	firstOpt.textContent = '';
		@@ -1292,27 +1497,8 @@
1292	1497	}
1293	1498	});
1294	1499	};
1295	1500
1296		- checkPlaceholderIE = function( input ) {
1297		- if ( input.value ) {
1298		- // Don't need to handle this case because placeholder isn't shown.
1299		- return;
1300		- }
1301		-
1302		- if ( document.activeElement === input ) {
1303		- if ( input.hasAttribute( 'data-placeholder' ) ) {
1304		- input.placeholder = input.getAttribute( 'data-placeholder' );
1305		- input.removeAttribute( 'data-placeholder' );
1306		- }
1307		- } else {
1308		- if ( input.placeholder ) {
1309		- input.setAttribute( 'data-placeholder', input.placeholder );
1310		- input.placeholder = '';
1311		- }
1312		- }
1313		- };
1314		-
1315	1501	[ 'focus', 'blur', 'change' ].forEach( function( eventName ) {
1316	1502	documentOn(
1317	1503	eventName,
1318	1504	selector,
		@@ -1332,9 +1518,9 @@
1332	1518	checkFloatLabel( document.activeElement );
1333	1519	} else if ( firstLoad ) {
1334	1520	document.querySelectorAll( '.frm_inside_container' ).forEach(
1335	1521	function( container ) {
1336		- var input = container.querySelector( 'input, select, textarea' );
	1522	+ const input = container.querySelector( 'input, select, textarea' );
1337	1523	if ( input && '' !== input.value ) {
1338	1524	checkFloatLabel( input );
1339	1525	}
1340	1526	}
		@@ -1341,14 +1527,8 @@
1341	1527	);
1342	1528	}
1343	1529
1344	1530	checkDropdownLabel();
1345		-
1346		- if ( isIE() ) {
1347		- document.querySelectorAll( selector ).forEach( function( input ) {
1348		- checkPlaceholderIE( input );
1349		- });
1350		- }
1351	1531	};
1352	1532
1353	1533	runOnLoad( true );
1354	1534
		@@ -1381,9 +1561,9 @@
1381	1561	return true;
1382	1562	}
1383	1563
1384	1564	function maybeClearCustomValidityMessage( event, field ) {
1385		- var key,
	1565	+ let key,
1386	1566	isInvalid = false;
1387	1567
1388	1568	if ( ! shouldUpdateValidityMessage( field ) ) {
1389	1569	return;
		@@ -1404,9 +1584,9 @@
1404	1584	}
1405	1585	}
1406	1586
1407	1587	function maybeShowNewTabFallbackMessage() {
1408		- var messageEl;
	1588	+ let messageEl;
1409	1589
1410	1590	if ( ! window.frmShowNewTabFallback ) {
1411	1591	return;
1412	1592	}
		@@ -1419,9 +1599,9 @@
1419	1599	messageEl.insertAdjacentHTML( 'beforeend', ' ' + frmShowNewTabFallback.message );
1420	1600	}
1421	1601
1422	1602	function setCustomValidityMessage() {
1423		- var forms, length, index;
	1603	+ let forms, length, index;
1424	1604
1425	1605	forms = document.getElementsByClassName( 'frm-show-form' );
1426	1606	length = forms.length;
1427	1607
		@@ -1428,9 +1608,9 @@
1428	1608	for ( index = 0; index < length; ++index ) {
1429	1609	forms[ index ].addEventListener(
1430	1610	'invalid',
1431	1611	function( event ) {
1432		- var target = event.target;
	1612	+ const target = event.target;
1433	1613
1434	1614	if ( shouldUpdateValidityMessage( target ) ) {
1435	1615	target.setCustomValidity( target.dataset.invmsg );
1436	1616	}
		@@ -1439,12 +1619,75 @@
1439	1619	);
1440	1620	}
1441	1621	}
1442	1622
	1623	+ function enableSubmitButtonOnBackButtonPress() {
	1624	+ window.addEventListener( 'pageshow', function( event ) {
	1625	+ if ( event.persisted ) {
	1626	+ document.querySelectorAll( '.frm_loading_form' ).forEach(
	1627	+ function( form ) {
	1628	+ enableSubmitButton( jQuery( form ) );
	1629	+ }
	1630	+ );
	1631	+ removeSubmitLoading();
	1632	+ }
	1633	+ });
	1634	+ }
	1635	+
	1636	+ /**
	1637	+ * Destroys the formidable generated global hcaptcha object since it wouldn't otherwise render.
	1638	+ */
	1639	+ function destroyhCaptcha() {
	1640	+ if ( ! window.hasOwnProperty( 'hcaptcha' ) || ! document.querySelector( '.frm-show-form .h-captcha' ) ) {
	1641	+ return;
	1642	+ }
	1643	+ window.hcaptcha = null;
	1644	+ }
	1645	+
	1646	+ /**
	1647	+ * @since 6.16.3
	1648	+ *
	1649	+ * @return {string} Unique key, used for duplicate checks.
	1650	+ */
	1651	+ function getUniqueKey() {
	1652	+ const uniqueKey = Array.from( window.crypto.getRandomValues( new Uint8Array( 8 ) ) )
	1653	+ .map( b => b.toString( 16 ).padStart( 2, '0' ) )
	1654	+ .join( '' );
	1655	+ const timestamp = Date.now().toString( 16 );
	1656	+ return uniqueKey + '-' + timestamp;
	1657	+ }
	1658	+
	1659	+ /**
	1660	+ * Animates the scroll position of the document.
	1661	+ *
	1662	+ * @since 6.20
	1663	+ *
	1664	+ * @param {number} start
	1665	+ * @param {number} end
	1666	+ * @param {number} duration
	1667	+ * @return {void}
	1668	+ */
	1669	+ function animateScroll( start, end, duration ) {
	1670	+ if ( ! window.hasOwnProperty( 'performance' ) || ! window.hasOwnProperty( 'requestAnimationFrame' ) ) {
	1671	+ document.documentElement.scrollTop = end;
	1672	+ return;
	1673	+ }
	1674	+
	1675	+ /* eslint-disable compat/compat */
	1676	+ const startTime = performance.now();
	1677	+ const step = ( currentTime ) => {
	1678	+ const progress = Math.min( ( currentTime - startTime ) / duration, 1 );
	1679	+ document.documentElement.scrollTop = start + ( end - start ) * progress;
	1680	+ if ( progress < 1 ) {
	1681	+ requestAnimationFrame( step );
	1682	+ }
	1683	+ };
	1684	+ requestAnimationFrame( step );
	1685	+ /* eslint-enable compat/compat */
	1686	+ }
	1687	+
1443	1688	return {
1444	1689	init: function() {
1445		- maybeAddPolyfills();
1446		-
1447	1690	jQuery( document ).off( 'submit.formidable', '.frm-show-form' );
1448	1691	jQuery( document ).on( 'submit.formidable', '.frm-show-form', frmFrontForm.submitForm );
1449	1692
1450	1693	jQuery( '.frm-show-form input[onblur], .frm-show-form textarea[onblur]' ).each( function() {
		@@ -1452,14 +1695,8 @@
1452	1695	jQuery( this ).trigger( 'blur' );
1453	1696	}
1454	1697	});
1455	1698
1456		- jQuery( document ).on( 'focus', '.frm_toggle_default', clearDefault );
1457		- jQuery( document ).on( 'blur', '.frm_toggle_default', replaceDefault );
1458		- jQuery( '.frm_toggle_default' ).trigger( 'blur' );
1459		-
1460		- jQuery( document.getElementById( 'frm_resend_email' ) ).on( 'click', resendEmail );
1461		-
1462	1699	jQuery( document ).on( 'change', '.frm-show-form input[name^="item_meta"], .frm-show-form select[name^="item_meta"], .frm-show-form textarea[name^="item_meta"]', frmFrontForm.fieldValueChanged );
1463	1700
1464	1701	jQuery( document ).on( 'change', '[id^=frm_email_]', onHoneypotFieldChange );
1465	1702	maybeMakeHoneypotFieldsUntabbable();
		@@ -1464,9 +1701,8 @@
1464	1701	jQuery( document ).on( 'change', '[id^=frm_email_]', onHoneypotFieldChange );
1465	1702	maybeMakeHoneypotFieldsUntabbable();
1466	1703
1467	1704	jQuery( document ).on( 'click', 'a[data-frmconfirm]', confirmClick );
1468		- jQuery( 'a[data-frmtoggle]' ).on( 'click', toggleDiv );
1469	1705
1470	1706	checkForErrorsAndMaybeSetFocus();
1471	1707
1472	1708	// Focus on the first sub field when clicking to the primary label of combo field.
		@@ -1471,12 +1707,8 @@
1471	1707
1472	1708	// Focus on the first sub field when clicking to the primary label of combo field.
1473	1709	changeFocusWhenClickComboFieldLabel();
1474	1710
1475		- // Add fallbacks for IE.
1476		- addTrimFallbackForIE(); // Trim only works in IE10+.
1477		- addFilterFallbackForIE(); // Filter is not supported in any version of IE.
1478		-
1479	1711	initFloatingLabels();
1480	1712	maybeShowNewTabFallbackMessage();
1481	1713
1482	1714	jQuery( document ).on( 'frmAfterAddRow', setCustomValidityMessage );
		@@ -1481,48 +1713,70 @@
1481	1713
1482	1714	jQuery( document ).on( 'frmAfterAddRow', setCustomValidityMessage );
1483	1715	setCustomValidityMessage();
1484	1716	jQuery( document ).on( 'frmFieldChanged', maybeClearCustomValidityMessage );
1485		- },
1486	1717
1487		- getFieldId: function( field, fullID ) {
1488		- return getFieldId( field, fullID );
	1718	+ setSelectPlaceholderColor();
	1719	+
	1720	+ // Elementor popup show event. Fix Elementor Popup && FF Captcha field conflicts
	1721	+ jQuery( document ).on( 'elementor/popup/show', frmRecaptcha );
	1722	+
	1723	+ enableSubmitButtonOnBackButtonPress();
	1724	+ jQuery( document ).on(
	1725	+ 'frmPageChanged',
	1726	+ destroyhCaptcha
	1727	+ );
1489	1728	},
1490	1729
1491		- renderRecaptcha: function( captcha ) {
1492		- var formID, recaptchaID,
1493		- size = captcha.getAttribute( 'data-size' ),
1494		- rendered = captcha.getAttribute( 'data-rid' ) !== null,
1495		- params = {
1496		- 'sitekey': captcha.getAttribute( 'data-sitekey' ),
1497		- 'size': size,
1498		- 'theme': captcha.getAttribute( 'data-theme' )
1499		- };
	1730	+ getFieldId,
1500	1731
	1732	+ /**
	1733	+ * Render a captcha field.
	1734	+ *
	1735	+ * @param {HTMLElement} captcha
	1736	+ * @param {string} captchaSelector
	1737	+ * @return {void}
	1738	+ */
	1739	+ renderCaptcha: function( captcha, captchaSelector ) {
	1740	+ const rendered = captcha.getAttribute( 'data-rid' ) !== null;
1501	1741	if ( rendered ) {
1502	1742	return;
1503	1743	}
1504	1744
	1745	+ const size = captcha.getAttribute( 'data-size' );
	1746	+ const params = {
	1747	+ sitekey: captcha.getAttribute( 'data-sitekey' ),
	1748	+ size: size,
	1749	+ theme: captcha.getAttribute( 'data-theme' )
	1750	+ };
	1751	+
1505	1752	if ( size === 'invisible' ) {
1506		- formID = jQuery( captcha ).closest( 'form' ).find( 'input[name="form_id"]' ).val();
1507		- jQuery( captcha ).closest( '.frm_form_field .frm_primary_label' ).hide();
	1753	+ const formID = captcha.closest( 'form' )?.querySelector( 'input[name="form_id"]' )?.value;
	1754	+
	1755	+ const captchaLabel = captcha.closest( '.frm_form_field' )?.querySelector( '.frm_primary_label' );
	1756	+ if ( captchaLabel ) {
	1757	+ captchaLabel.style.display = 'none';
	1758	+ }
	1759	+
1508	1760	params.callback = function( token ) {
1509	1761	frmFrontForm.afterRecaptcha( token, formID );
1510	1762	};
1511	1763	}
1512	1764
1513		- recaptchaID = grecaptcha.render( captcha.id, params );
	1765	+ const activeCaptcha = getSelectedCaptcha( captchaSelector );
	1766	+ const captchaContainer = typeof turnstile !== 'undefined' && turnstile === activeCaptcha ? '#' + captcha.id : captcha.id;
	1767	+ const captchaID = activeCaptcha.render( captchaContainer, params );
1514	1768
1515		- captcha.setAttribute( 'data-rid', recaptchaID );
	1769	+ captcha.setAttribute( 'data-rid', captchaID );
1516	1770	},
1517	1771
1518	1772	afterSingleRecaptcha: function() {
1519		- var object = jQuery( '.frm-show-form .g-recaptcha' ).closest( 'form' )[0];
	1773	+ const object = jQuery( '.frm-show-form .g-recaptcha' ).closest( 'form' )[0];
1520	1774	frmFrontForm.submitFormNow( object );
1521	1775	},
1522	1776
1523		- afterRecaptcha: function( token, formID ) {
1524		- var object = jQuery( '#frm_form_' + formID + '_container form' )[0];
	1777	+ afterRecaptcha: function( _, formID ) {
	1778	+ const object = jQuery( '#frm_form_' + formID + '_container form' )[0];
1525	1779	frmFrontForm.submitFormNow( object );
1526	1780	},
1527	1781
1528	1782	submitForm: function( e ) {
		@@ -1528,10 +1782,15 @@
1528	1782	submitForm: function( e ) {
1529	1783	frmFrontForm.submitFormManual( e, this );
1530	1784	},
1531	1785
	1786	+ /**
	1787	+ * @param {Event} e
	1788	+ * @param {HTMLElement} object The form object that is being submitted.
	1789	+ * @return {void}
	1790	+ */
1532	1791	submitFormManual: function( e, object ) {
1533		- var isPro, errors,
	1792	+ let isPro, errors,
1534	1793	invisibleRecaptcha = hasInvisibleRecaptcha( object ),
1535	1794	classList = object.className.trim().split( /\s+/gi );
1536	1795
1537	1796	if ( classList && invisibleRecaptcha.length < 1 ) {
		@@ -1546,31 +1805,30 @@
1546	1805	}
1547	1806
1548	1807	e.preventDefault();
1549	1808
1550		- if ( typeof frmProForm !== 'undefined' && typeof frmProForm.submitAllowed === 'function' ) {
1551		- if ( ! frmProForm.submitAllowed( object ) ) {
1552		- return;
1553		- }
	1809	+ if ( typeof frmProForm !== 'undefined' && typeof frmProForm.submitAllowed === 'function' && ! frmProForm.submitAllowed( object ) ) {
	1810	+ return;
1554	1811	}
1555	1812
	1813	+ errors = frmFrontForm.validateFormSubmit( object );
	1814	+ if ( Object.keys( errors ).length !== 0 ) {
	1815	+ return;
	1816	+ }
	1817	+
1556	1818	if ( invisibleRecaptcha.length ) {
1557	1819	showLoadingIndicator( jQuery( object ) );
1558	1820	executeInvisibleRecaptcha( invisibleRecaptcha );
1559	1821	} else {
1560	1822
1561		- errors = frmFrontForm.validateFormSubmit( object );
	1823	+ showSubmitLoading( jQuery( object ) );
1562	1824
1563		- if ( Object.keys( errors ).length === 0 ) {
1564		- showSubmitLoading( jQuery( object ) );
1565		-
1566		- frmFrontForm.submitFormNow( object, classList );
1567		- }
	1825	+ frmFrontForm.submitFormNow( object, classList );
1568	1826	}
1569	1827	},
1570	1828
1571	1829	submitFormNow: function( object ) {
1572		- var hasFileFields, antispamInput,
	1830	+ let hasFileFields, antispamInput,
1573	1831	classList = object.className.trim().split( /\s+/gi );
1574	1832
1575	1833	if ( object.hasAttribute( 'data-token' ) && null === object.querySelector( '[name="antispam_token"]' ) ) {
1576	1834	// include the antispam token on form submit.
		@@ -1580,14 +1838,21 @@
1580	1838	antispamInput.value = object.getAttribute( 'data-token' );
1581	1839	object.appendChild( antispamInput );
1582	1840	}
1583	1841
	1842	+ // Add a unique ID, used for duplicate checks.
	1843	+ const uniqueIDInput = document.createElement( 'input' );
	1844	+ uniqueIDInput.type = 'hidden';
	1845	+ uniqueIDInput.name = 'unique_id';
	1846	+ uniqueIDInput.value = getUniqueKey();
	1847	+ object.appendChild( uniqueIDInput );
	1848	+
1584	1849	if ( classList.indexOf( 'frm_ajax_submit' ) > -1 ) {
1585	1850	hasFileFields = jQuery( object ).find( 'input[type="file"]' ).filter( function() {
1586	1851	return !! this.value;
1587	1852	}).length;
1588	1853	if ( hasFileFields < 1 ) {
1589		- action = jQuery( object ).find( 'input[name="frm_action"]' ).val();
	1854	+ const action = jQuery( object ).find( 'input[name="frm_action"]' ).val();
1590	1855	frmFrontForm.checkFormErrors( object, action );
1591	1856	} else {
1592	1857	object.submit();
1593	1858	}
		@@ -1595,8 +1860,13 @@
1595	1860	object.submit();
1596	1861	}
1597	1862	},
1598	1863
	1864	+ /**
	1865	+ * @param {HTMLElement|Object} object Form object. This might be a jQuery object.
	1866	+ *
	1867	+ * @return {Array} List of errors.
	1868	+ */
1599	1869	validateFormSubmit: function( object ) {
1600	1870	if ( typeof tinyMCE !== 'undefined' && jQuery( object ).find( '.wp-editor-wrap' ).length ) {
1601	1871	tinyMCE.triggerSave();
1602	1872	}
		@@ -1613,14 +1883,18 @@
1613	1883
1614	1884	return jsErrors;
1615	1885	},
1616	1886
	1887	+ /**
	1888	+ * @param {HTMLElement|Object} object Form object. This might be a jQuery object.
	1889	+ * @return {Array} List of errors.
	1890	+ */
1617	1891	getAjaxFormErrors: function( object ) {
1618		- var customErrors, key;
	1892	+ let customErrors, key;
1619	1893
1620	1894	jsErrors = validateForm( object );
1621	1895	if ( typeof frmThemeOverride_jsErrors === 'function' ) { // eslint-disable-line camelcase
1622		- action = jQuery( object ).find( 'input[name="frm_action"]' ).val();
	1896	+ const action = jQuery( object ).find( 'input[name="frm_action"]' ).val();
1623	1897	customErrors = frmThemeOverride_jsErrors( action, object );
1624	1898	if ( Object.keys( customErrors ).length ) {
1625	1899	for ( key in customErrors ) {
1626	1900	jsErrors[ key ] = customErrors[ key ];
		@@ -1627,13 +1901,22 @@
1627	1901	}
1628	1902	}
1629	1903	}
1630	1904
	1905	+ triggerCustomEvent( document, 'frm_get_ajax_form_errors', {
	1906	+ formEl: object,
	1907	+ errors: jsErrors
	1908	+ });
	1909	+
1631	1910	return jsErrors;
1632	1911	},
1633	1912
	1913	+ /**
	1914	+ * @param {HTMLElement|Object} object Form object. This might be a jQuery object.
	1915	+ * @return {void}
	1916	+ */
1634	1917	addAjaxFormErrors: function( object ) {
1635		- var key, $fieldCont;
	1918	+ let key, $fieldCont;
1636	1919	removeAllErrors();
1637	1920
1638	1921	for ( key in jsErrors ) {
1639	1922	$fieldCont = jQuery( object ).find( '#frm_field_' + key + '_container' );
		@@ -1649,31 +1932,20 @@
1649	1932	scrollToFirstField( object );
1650	1933	checkForErrorsAndMaybeSetFocus();
1651	1934	},
1652	1935
1653		- checkFormErrors: function( object, action ) {
1654		- getFormErrors( object, action );
1655		- },
	1936	+ checkFormErrors: getFormErrors,
	1937	+ checkRequiredField,
	1938	+ showSubmitLoading,
	1939	+ removeSubmitLoading,
1656	1940
1657		- checkRequiredField: function( field, errors ) {
1658		- return checkRequiredField( field, errors );
1659		- },
1660		-
1661		- showSubmitLoading: function( $object ) {
1662		- showSubmitLoading( $object );
1663		- },
1664		-
1665		- removeSubmitLoading: function( $object, enable, processesRunning ) {
1666		- removeSubmitLoading( $object, enable, processesRunning );
1667		- },
1668		-
1669	1941	scrollToID: function( id ) {
1670		- var object = jQuery( document.getElementById( id ) );
	1942	+ const object = jQuery( document.getElementById( id ) );
1671	1943	frmFrontForm.scrollMsg( object, false );
1672	1944	},
1673	1945
1674	1946	scrollMsg: function( id, object, animate ) {
1675		- var newPos, m, b, screenTop, screenBottom,
	1947	+ let newPos, m, b, screenTop, screenBottom,
1676	1948	scrollObj = '';
1677	1949	if ( typeof object === 'undefined' ) {
1678	1950	scrollObj = jQuery( document.getElementById( 'frm_form_' + id + '_container' ) );
1679	1951	if ( scrollObj.length < 1 ) {
		@@ -1704,11 +1976,11 @@
1704	1976
1705	1977	if ( newPos > screenBottom || newPos < screenTop ) {
1706	1978	// Not in view
1707	1979	if ( typeof animate === 'undefined' ) {
1708		- jQuery( window ).scrollTop( newPos );
	1980	+ document.documentElement.scrollTop = newPos;
1709	1981	} else {
1710		- jQuery( 'html,body' ).animate({ scrollTop: newPos }, 500 );
	1982	+ animateScroll( screenTop, newPos, 500 );
1711	1983	}
1712	1984	return false;
1713	1985	}
1714	1986	}
		@@ -1716,9 +1988,9 @@
1716	1988
1717	1989	fieldValueChanged: function( e ) {
1718	1990	/*jshint validthis:true */
1719	1991
1720		- var fieldId = frmFrontForm.getFieldId( this, false );
	1992	+ const fieldId = frmFrontForm.getFieldId( this, false );
1721	1993	if ( ! fieldId || typeof fieldId === 'undefined' ) {
1722	1994	return;
1723	1995	}
1724	1996
		@@ -1732,56 +2004,10 @@
1732	2004	maybeValidateChange( this );
1733	2005	}
1734	2006	},
1735	2007
1736		- savingDraft: function( object ) {
1737		- console.warn( 'DEPRECATED: function frmFrontForm.savingDraft in v3.0 use frmProForm.savingDraft' );
1738		- if ( typeof frmProForm !== 'undefined' ) {
1739		- return frmProForm.savingDraft( object );
1740		- }
1741		- },
1742		-
1743		- goingToPreviousPage: function( object ) {
1744		- console.warn( 'DEPRECATED: function frmFrontForm.goingToPreviousPage in v3.0 use frmProForm.goingToPreviousPage' );
1745		- if ( typeof frmProForm !== 'undefined' ) {
1746		- return frmProForm.goingToPreviousPage( object );
1747		- }
1748		- },
1749		-
1750		- hideOrShowFields: function() {
1751		- console.warn( 'DEPRECATED: function frmFrontForm.hideOrShowFields in v3.0 use frmProForm.hideOrShowFields' );
1752		- if ( typeof frmProForm !== 'undefined' ) {
1753		- frmProForm.hideOrShowFields();
1754		- }
1755		- },
1756		-
1757		- hidePreviouslyHiddenFields: function() {
1758		- console.warn( 'DEPRECATED: function frmFrontForm.hidePreviouslyHiddenFields in v3.0 use frmProForm.hidePreviouslyHiddenFields' );
1759		- if ( typeof frmProForm !== 'undefined' ) {
1760		- frmProForm.hidePreviouslyHiddenFields();
1761		- }
1762		- },
1763		-
1764		- checkDependentDynamicFields: function( ids ) {
1765		- console.warn( 'DEPRECATED: function frmFrontForm.checkDependentDynamicFields in v3.0 use frmProForm.checkDependentDynamicFields' );
1766		- if ( typeof frmProForm !== 'undefined' ) {
1767		- frmProForm.checkDependentDynamicFields( ids );
1768		- }
1769		- },
1770		-
1771		- checkDependentLookupFields: function( ids ) {
1772		- console.warn( 'DEPRECATED: function frmFrontForm.checkDependentLookupFields in v3.0 use frmProForm.checkDependentLookupFields' );
1773		- if ( typeof frmProForm !== 'undefined' ) {
1774		- frmProForm.checkDependentLookupFields( ids );
1775		- }
1776		- },
1777		-
1778		- loadGoogle: function() {
1779		- console.warn( 'DEPRECATED: function frmFrontForm.loadGoogle in v3.0 use frmProForm.loadGoogle' );
1780		- frmProForm.loadGoogle();
1781		- },
1782		-
1783	2008	escapeHtml: function( text ) {
	2009	+ console.warn( 'DEPRECATED: function frmFrontForm.escapeHtml in v6.17' );
1784	2010	return text
1785	2011	.replace( /&/g, '&amp;' )
1786	2012	.replace( /</g, '&lt;' )
1787	2013	.replace( />/g, '&gt;' )
		@@ -1788,97 +2014,85 @@
1788	2014	.replace( /"/g, '&quot;' )
1789	2015	.replace( /'/g, '&#039;' );
1790	2016	},
1791	2017
	2018	+ /**
	2019	+ * This function was used in old back end code in v2.0.
	2020	+ *
	2021	+ * @param {string} classes
	2022	+ * @return {void}
	2023	+ */
1792	2024	invisible: function( classes ) {
	2025	+ console.warn( 'DEPRECATED: function frmFrontForm.invisible in v6.16.3' );
1793	2026	jQuery( classes ).css( 'visibility', 'hidden' );
1794	2027	},
1795	2028
	2029	+ /**
	2030	+ * This function was used in old back end code in v2.0.
	2031	+ *
	2032	+ * @param {string} classes
	2033	+ * @return {void}
	2034	+ */
1796	2035	visible: function( classes ) {
	2036	+ console.warn( 'DEPRECATED: function frmFrontForm.visible in v6.16.3' );
1797	2037	jQuery( classes ).css( 'visibility', 'visible' );
1798		- }
	2038	+ },
	2039	+
	2040	+ triggerCustomEvent: triggerCustomEvent,
	2041	+ documentOn
1799	2042	};
1800	2043	}
1801		-frmFrontForm = frmFrontFormJS();
1802	2044
	2045	+window.frmFrontForm = frmFrontFormJS();
	2046	+
1803	2047	jQuery( document ).ready( function() {
1804	2048	frmFrontForm.init();
1805	2049	});
1806	2050
1807	2051	function frmRecaptcha() {
1808		- var c, cl,
1809		- captchas = jQuery( '.frm-g-recaptcha' );
1810		- for ( c = 0, cl = captchas.length; c < cl; c++ ) {
1811		- frmFrontForm.renderRecaptcha( captchas[c]);
1812		- }
	2052	+ frmCaptcha( '.frm-g-recaptcha' );
1813	2053	}
1814	2054
1815		-function frmAfterRecaptcha( token ) {
1816		- frmFrontForm.afterSingleRecaptcha( token );
	2055	+function frmTurnstile() {
	2056	+ frmCaptcha( '.cf-turnstile' );
1817	2057	}
1818	2058
1819		-function frmUpdateField( entryId, fieldId, value, message, num ) {
1820		- jQuery( document.getElementById( 'frm_update_field_' + entryId + '_' + fieldId + '_' + num ) ).html( '<span class="frm-loading-img"></span>' );
1821		- jQuery.ajax({
1822		- type: 'POST',
1823		- url: frm_js.ajax_url, // eslint-disable-line camelcase
1824		- data: {
1825		- action: 'frm_entries_update_field_ajax',
1826		- entry_id: entryId,
1827		- field_id: fieldId,
1828		- value: value,
1829		- nonce: frm_js.nonce // eslint-disable-line camelcase
1830		- },
1831		- success: function() {
1832		- if ( message.replace( /^\s+|\s+$/g, '' ) === '' ) {
1833		- jQuery( document.getElementById( 'frm_update_field_' + entryId + '_' + fieldId + '_' + num ) ).fadeOut( 'slow' );
1834		- } else {
1835		- jQuery( document.getElementById( 'frm_update_field_' + entryId + '_' + fieldId + '_' + num ) ).replaceWith( message );
1836		- }
	2059	+function frmCaptcha( captchaSelector ) {
	2060	+ let c;
	2061	+ const captchas = document.querySelectorAll( captchaSelector );
	2062	+ const cl = captchas.length;
	2063	+ for ( c = 0; c < cl; c++ ) {
	2064	+ const closestForm = captchas[c].closest( 'form' );
	2065	+ const formIsVisible = closestForm && closestForm.offsetParent !== null;
	2066	+ const captcha = captchas[c];
	2067	+ if ( ! formIsVisible ) {
	2068	+ // If the form is not visible, try again later in 400ms.
	2069	+ // This fixes issues where the form fades visible on page load.
	2070	+ // Or whne the form is inside of a modal.
	2071	+ const interval = setInterval(
	2072	+ function() {
	2073	+ if ( closestForm && closestForm.offsetParent !== null ) {
	2074	+ frmFrontForm.renderCaptcha( captcha, captchaSelector );
	2075	+ clearInterval( interval );
	2076	+ }
	2077	+ },
	2078	+ 400
	2079	+ );
	2080	+ continue;
1837	2081	}
1838		- });
	2082	+ frmFrontForm.renderCaptcha( captcha, captchaSelector );
	2083	+ }
1839	2084	}
1840	2085
1841		-function frmDeleteEntry( entryId, prefix ) {
1842		- console.warn( 'DEPRECATED: function frmDeleteEntry in v2.0.13 use frmFrontForm.deleteEntry' );
1843		- jQuery( document.getElementById( 'frm_delete_' + entryId ) ).replaceWith( '<span class="frm-loading-img" id="frm_delete_' + entryId + '"></span>' );
1844		- jQuery.ajax({
1845		- type: 'POST',
1846		- url: frm_js.ajax_url, // eslint-disable-line camelcase
1847		- data: {
1848		- action: 'frm_entries_destroy',
1849		- entry: entryId,
1850		- nonce: frm_js.nonce // eslint-disable-line camelcase
1851		- },
1852		- success: function( html ) {
1853		- if ( html.replace( /^\s+|\s+$/g, '' ) === 'success' ) {
1854		- jQuery( document.getElementById( prefix + entryId ) ).fadeOut( 'slow' );
1855		- } else {
1856		- jQuery( document.getElementById( 'frm_delete_' + entryId ) ).replaceWith( html );
1857		- }
1858		- }
1859		- });
	2086	+function getSelectedCaptcha( captchaSelector ) {
	2087	+ if ( captchaSelector === '.frm-g-recaptcha' ) {
	2088	+ return grecaptcha;
	2089	+ }
	2090	+ if ( document.querySelector( '.cf-turnstile' ) ) {
	2091	+ return turnstile;
	2092	+ }
	2093	+ return hcaptcha;
1860	2094	}
1861	2095
1862		-function frmOnSubmit( e ) {
1863		- console.warn( 'DEPRECATED: function frmOnSubmit in v2.0 use frmFrontForm.submitForm' );
1864		- frmFrontForm.submitForm( e, this );
1865		-}
1866		-
1867		-function frm_resend_email( entryId, formId ) { // eslint-disable-line camelcase
1868		- var $link = jQuery( document.getElementById( 'frm_resend_email' ) );
1869		- console.warn( 'DEPRECATED: function frm_resend_email in v2.0' );
1870		- $link.append( '<span class="spinner" style="display:inline"></span>' );
1871		- jQuery.ajax({
1872		- type: 'POST',
1873		- url: frm_js.ajax_url, // eslint-disable-line camelcase
1874		- data: {
1875		- action: 'frm_entries_send_email',
1876		- entry_id: entryId,
1877		- form_id: formId,
1878		- nonce: frm_js.nonce // eslint-disable-line camelcase
1879		- },
1880		- success: function( msg ) {
1881		- $link.replaceWith( msg );
1882		- }
1883		- });
	2096	+function frmAfterRecaptcha( token ) {
	2097	+ frmFrontForm.afterSingleRecaptcha( token );
1884	2098	}