← All changes | js/formidable.js +784 -594 6.5 → 6.21 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,44 +1288,14 @@
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	}
1111	1297
1112		- function maybeMakeHoneypotFieldsUntabbable() {
1113		- document.addEventListener( 'keydown', handleKeyUp );
1114		-
1115		- 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 ) {
1125		- makeHoneypotFieldsUntabbable();
1126		- document.removeEventListener( 'keydown', handleKeyUp );
1127		- }
1128		- }
1129		-
1130		- function makeHoneypotFieldsUntabbable() {
1131		- document.querySelectorAll( '.frm_verify' ).forEach(
1132		- function( wrapper ) {
1133		- var input = wrapper.querySelector( 'input[id^=frm_email]' );
1134		- if ( input ) {
1135		- input.setAttribute( 'tabindex', -1 );
1136		- }
1137		- }
1138		- );
1139		- }
1140		- }
1141		-
1142	1298	/**
1143	1299	* Focus on the first sub field when clicking to the primary label of combo field.
1144	1300	*
1145	1301	* @since 4.10.02
		@@ -1144,11 +1300,11 @@
1144	1300	*
1145	1301	* @since 4.10.02
1146	1302	*/
1147	1303	function changeFocusWhenClickComboFieldLabel() {
1148		- var label;
	1304	+ let label;
1149	1305
1150		- var comboInputsContainer = document.querySelectorAll( '.frm_combo_inputs_container' );
	1306	+ const comboInputsContainer = document.querySelectorAll( '.frm_combo_inputs_container' );
1151	1307	comboInputsContainer.forEach( function( inputsContainer ) {
1152	1308	if ( ! inputsContainer.closest( '.frm_form_field' ) ) {
1153	1309	return;
1154	1310	}
		@@ -1157,16 +1313,39 @@
1157	1313	if ( ! label ) {
1158	1314	return;
1159	1315	}
1160	1316
1161		- label.addEventListener( 'click', function( e ) {
	1317	+ label.addEventListener( 'click', function() {
1162	1318	inputsContainer.querySelector( '.frm_form_field:first-child input, .frm_form_field:first-child select, .frm_form_field:first-child textarea' ).focus();
1163	1319	});
1164	1320	});
1165	1321	}
1166	1322
	1323	+ /**
	1324	+ * Sets focus on a the first subfield of a combo field that has an error.
	1325	+ *
	1326	+ * @since 6.16.3
	1327	+ *
	1328	+ * @param {HTMLElement} element
	1329	+ * @return {boolean} True if the focus was set on a combo field.
	1330	+ */
	1331	+ function maybeFocusOnComboSubField( element ) {
	1332	+ if ( 'FIELDSET' !== element.nodeName ) {
	1333	+ return false;
	1334	+ }
	1335	+ if ( ! element.querySelector( '.frm_combo_inputs_container' ) ) {
	1336	+ return false;
	1337	+ }
	1338	+ const comboSubfield = element.querySelector( '[aria-invalid="true"]' );
	1339	+ if ( comboSubfield ) {
	1340	+ focusInput( comboSubfield );
	1341	+ return true;
	1342	+ }
	1343	+ return false;
	1344	+ }
	1345	+
1167	1346	function checkForErrorsAndMaybeSetFocus() {
1168		- var errors, element, timeoutCallback;
	1347	+ let errors, element, timeoutCallback;
1169	1348
1170	1349	if ( ! frm_js.focus_first_error ) { // eslint-disable-line camelcase
1171	1350	return;
1172	1351	}
		@@ -1179,16 +1358,20 @@
1179	1358	element = errors[0];
1180	1359	do {
1181	1360	element = element.previousSibling;
1182	1361	if ( -1 !== [ 'input', 'select', 'textarea' ].indexOf( element.nodeName.toLowerCase() ) ) {
1183		- element.focus();
	1362	+ focusInput( element );
1184	1363	break;
1185	1364	}
1186	1365
	1366	+ if ( maybeFocusOnComboSubField( element ) ) {
	1367	+ break;
	1368	+ }
	1369	+
1187	1370	if ( 'undefined' !== typeof element.classList ) {
1188	1371	if ( element.classList.contains( 'html-active' ) ) {
1189	1372	timeoutCallback = function() {
1190		- var textarea = element.querySelector( 'textarea' );
	1373	+ const textarea = element.querySelector( 'textarea' );
1191	1374	if ( null !== textarea ) {
1192	1375	textarea.focus();
1193	1376	}
1194	1377	};
		@@ -1206,16 +1389,21 @@
1206	1389	} while ( element.previousSibling );
1207	1390	}
1208	1391
1209	1392	/**
1210		- * Checks if is on IE browser.
	1393	+ * Focus a visible input, or possibly delay the focus event until the form has faded in.
1211	1394	*
1212		- * @since 5.4
	1395	+ * @since 6.16.3
1213	1396	*
1214		- * @return {Boolean}
	1397	+ * @param {HTMLElement} input
	1398	+ * @return {void}
1215	1399	*/
1216		- function isIE() {
1217		- return navigator.userAgent.indexOf( 'MSIE' ) > -1 || navigator.userAgent.indexOf( 'Trident' ) > -1;
	1400	+ function focusInput( input ) {
	1401	+ if ( input.offsetParent !== null ) {
	1402	+ input.focus();
	1403	+ } else {
	1404	+ triggerCustomEvent( document, 'frmMaybeDelayFocus', { input });
	1405	+ }
1218	1406	}
1219	1407
1220	1408	/**
1221	1409	* Does the same as jQuery( document ).on( 'event', 'selector', handler ).
		@@ -1221,12 +1409,12 @@
1221	1409	* Does the same as jQuery( document ).on( 'event', 'selector', handler ).
1222	1410	*
1223	1411	* @since 5.4
1224	1412	*
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`.
	1413	+ * @param {string} event Event name.
	1414	+ * @param {string} selector Selector.
	1415	+ * @param {Function} handler Handler.
	1416	+ * @param {boolean | Object} options Options to be added to `addEventListener()` method. Default is `false`.
1229	1417	*/
1230	1418	function documentOn( event, selector, handler, options ) {
1231	1419	if ( 'undefined' === typeof options ) {
1232	1420	options = false;
		@@ -1232,9 +1420,9 @@
1232	1420	options = false;
1233	1421	}
1234	1422
1235	1423	document.addEventListener( event, function( e ) {
1236		- var target;
	1424	+ let target;
1237	1425
1238	1426	// loop parent nodes from the target to the delegation node.
1239	1427	for ( target = e.target; target && target != this; target = target.parentNode ) {
1240	1428	if ( target && target.matches && target.matches( selector ) ) {
		@@ -1245,15 +1433,15 @@
1245	1433	}, options );
1246	1434	}
1247	1435
1248	1436	function initFloatingLabels() {
1249		- var checkFloatLabel, checkDropdownLabel, checkPlaceholderIE, runOnLoad, selector, floatClass;
	1437	+ let checkFloatLabel, checkDropdownLabel, runOnLoad, selector, floatClass;
1250	1438
1251	1439	selector = '.frm-show-form .frm_inside_container input, .frm-show-form .frm_inside_container select, .frm-show-form .frm_inside_container textarea';
1252	1440	floatClass = 'frm_label_float_top';
1253	1441
1254	1442	checkFloatLabel = function( input ) {
1255		- var container, shouldFloatTop, firstOpt;
	1443	+ let container, shouldFloatTop, firstOpt;
1256	1444
1257	1445	container = input.closest( '.frm_inside_container' );
1258	1446	if ( ! container ) {
1259	1447	return;
		@@ -1270,22 +1458,18 @@
1270	1458	if ( firstOpt.hasAttribute( 'data-label' ) ) {
1271	1459	firstOpt.textContent = firstOpt.getAttribute( 'data-label' );
1272	1460	firstOpt.removeAttribute( 'data-label' );
1273	1461	}
1274		- } else {
1275		- if ( firstOpt.textContent ) {
1276		- firstOpt.setAttribute( 'data-label', firstOpt.textContent );
1277		- firstOpt.textContent = '';
1278		- }
	1462	+ } else if ( firstOpt.textContent ) {
	1463	+ firstOpt.setAttribute( 'data-label', firstOpt.textContent );
	1464	+ firstOpt.textContent = '';
1279	1465	}
1280		- } else if ( isIE() ) {
1281		- checkPlaceholderIE( input );
1282	1466	}
1283	1467	};
1284	1468
1285	1469	checkDropdownLabel = function() {
1286	1470	document.querySelectorAll( '.frm-show-form .frm_inside_container:not(.' + floatClass + ') select' ).forEach( function( input ) {
1287		- var firstOpt = input.querySelector( 'option:first-child' );
	1471	+ const firstOpt = input.querySelector( 'option:first-child' );
1288	1472
1289	1473	if ( firstOpt.textContent ) {
1290	1474	firstOpt.setAttribute( 'data-label', firstOpt.textContent );
1291	1475	firstOpt.textContent = '';
		@@ -1292,27 +1476,8 @@
1292	1476	}
1293	1477	});
1294	1478	};
1295	1479
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	1480	[ 'focus', 'blur', 'change' ].forEach( function( eventName ) {
1316	1481	documentOn(
1317	1482	eventName,
1318	1483	selector,
		@@ -1332,9 +1497,9 @@
1332	1497	checkFloatLabel( document.activeElement );
1333	1498	} else if ( firstLoad ) {
1334	1499	document.querySelectorAll( '.frm_inside_container' ).forEach(
1335	1500	function( container ) {
1336		- var input = container.querySelector( 'input, select, textarea' );
	1501	+ const input = container.querySelector( 'input, select, textarea' );
1337	1502	if ( input && '' !== input.value ) {
1338	1503	checkFloatLabel( input );
1339	1504	}
1340	1505	}
		@@ -1341,14 +1506,8 @@
1341	1506	);
1342	1507	}
1343	1508
1344	1509	checkDropdownLabel();
1345		-
1346		- if ( isIE() ) {
1347		- document.querySelectorAll( selector ).forEach( function( input ) {
1348		- checkPlaceholderIE( input );
1349		- });
1350		- }
1351	1510	};
1352	1511
1353	1512	runOnLoad( true );
1354	1513
		@@ -1381,9 +1540,9 @@
1381	1540	return true;
1382	1541	}
1383	1542
1384	1543	function maybeClearCustomValidityMessage( event, field ) {
1385		- var key,
	1544	+ let key,
1386	1545	isInvalid = false;
1387	1546
1388	1547	if ( ! shouldUpdateValidityMessage( field ) ) {
1389	1548	return;
		@@ -1404,9 +1563,9 @@
1404	1563	}
1405	1564	}
1406	1565
1407	1566	function maybeShowNewTabFallbackMessage() {
1408		- var messageEl;
	1567	+ let messageEl;
1409	1568
1410	1569	if ( ! window.frmShowNewTabFallback ) {
1411	1570	return;
1412	1571	}
		@@ -1419,9 +1578,9 @@
1419	1578	messageEl.insertAdjacentHTML( 'beforeend', ' ' + frmShowNewTabFallback.message );
1420	1579	}
1421	1580
1422	1581	function setCustomValidityMessage() {
1423		- var forms, length, index;
	1582	+ let forms, length, index;
1424	1583
1425	1584	forms = document.getElementsByClassName( 'frm-show-form' );
1426	1585	length = forms.length;
1427	1586
		@@ -1428,9 +1587,9 @@
1428	1587	for ( index = 0; index < length; ++index ) {
1429	1588	forms[ index ].addEventListener(
1430	1589	'invalid',
1431	1590	function( event ) {
1432		- var target = event.target;
	1591	+ const target = event.target;
1433	1592
1434	1593	if ( shouldUpdateValidityMessage( target ) ) {
1435	1594	target.setCustomValidity( target.dataset.invmsg );
1436	1595	}
		@@ -1439,12 +1598,75 @@
1439	1598	);
1440	1599	}
1441	1600	}
1442	1601
	1602	+ function enableSubmitButtonOnBackButtonPress() {
	1603	+ window.addEventListener( 'pageshow', function( event ) {
	1604	+ if ( event.persisted ) {
	1605	+ document.querySelectorAll( '.frm_loading_form' ).forEach(
	1606	+ function( form ) {
	1607	+ enableSubmitButton( jQuery( form ) );
	1608	+ }
	1609	+ );
	1610	+ removeSubmitLoading();
	1611	+ }
	1612	+ });
	1613	+ }
	1614	+
	1615	+ /**
	1616	+ * Destroys the formidable generated global hcaptcha object since it wouldn't otherwise render.
	1617	+ */
	1618	+ function destroyhCaptcha() {
	1619	+ if ( ! window.hasOwnProperty( 'hcaptcha' ) || ! document.querySelector( '.frm-show-form .h-captcha' ) ) {
	1620	+ return;
	1621	+ }
	1622	+ window.hcaptcha = null;
	1623	+ }
	1624	+
	1625	+ /**
	1626	+ * @since 6.16.3
	1627	+ *
	1628	+ * @return {string} Unique key, used for duplicate checks.
	1629	+ */
	1630	+ function getUniqueKey() {
	1631	+ const uniqueKey = Array.from( window.crypto.getRandomValues( new Uint8Array( 8 ) ) )
	1632	+ .map( b => b.toString( 16 ).padStart( 2, '0' ) )
	1633	+ .join( '' );
	1634	+ const timestamp = Date.now().toString( 16 );
	1635	+ return uniqueKey + '-' + timestamp;
	1636	+ }
	1637	+
	1638	+ /**
	1639	+ * Animates the scroll position of the document.
	1640	+ *
	1641	+ * @since 6.20
	1642	+ *
	1643	+ * @param {number} start
	1644	+ * @param {number} end
	1645	+ * @param {number} duration
	1646	+ * @return {void}
	1647	+ */
	1648	+ function animateScroll( start, end, duration ) {
	1649	+ if ( ! window.hasOwnProperty( 'performance' ) || ! window.hasOwnProperty( 'requestAnimationFrame' ) ) {
	1650	+ document.documentElement.scrollTop = end;
	1651	+ return;
	1652	+ }
	1653	+
	1654	+ /* eslint-disable compat/compat */
	1655	+ const startTime = performance.now();
	1656	+ const step = ( currentTime ) => {
	1657	+ const progress = Math.min( ( currentTime - startTime ) / duration, 1 );
	1658	+ document.documentElement.scrollTop = start + ( end - start ) * progress;
	1659	+ if ( progress < 1 ) {
	1660	+ requestAnimationFrame( step );
	1661	+ }
	1662	+ };
	1663	+ requestAnimationFrame( step );
	1664	+ /* eslint-enable compat/compat */
	1665	+ }
	1666	+
1443	1667	return {
1444	1668	init: function() {
1445		- maybeAddPolyfills();
1446		-
1447	1669	jQuery( document ).off( 'submit.formidable', '.frm-show-form' );
1448	1670	jQuery( document ).on( 'submit.formidable', '.frm-show-form', frmFrontForm.submitForm );
1449	1671
1450	1672	jQuery( '.frm-show-form input[onblur], .frm-show-form textarea[onblur]' ).each( function() {
		@@ -1452,21 +1674,13 @@
1452	1674	jQuery( this ).trigger( 'blur' );
1453	1675	}
1454	1676	});
1455	1677
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	1678	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	1679
1464		- jQuery( document ).on( 'change', '[id^=frm_email_]', onHoneypotFieldChange );
1465		- maybeMakeHoneypotFieldsUntabbable();
	1680	+ jQuery( document ).on( 'change', '.frm_verify[id^=field_]', onHoneypotFieldChange );
1466	1681
1467	1682	jQuery( document ).on( 'click', 'a[data-frmconfirm]', confirmClick );
1468		- jQuery( 'a[data-frmtoggle]' ).on( 'click', toggleDiv );
1469	1683
1470	1684	checkForErrorsAndMaybeSetFocus();
1471	1685
1472	1686	// Focus on the first sub field when clicking to the primary label of combo field.
		@@ -1471,12 +1685,8 @@
1471	1685
1472	1686	// Focus on the first sub field when clicking to the primary label of combo field.
1473	1687	changeFocusWhenClickComboFieldLabel();
1474	1688
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	1689	initFloatingLabels();
1480	1690	maybeShowNewTabFallbackMessage();
1481	1691
1482	1692	jQuery( document ).on( 'frmAfterAddRow', setCustomValidityMessage );
		@@ -1481,48 +1691,70 @@
1481	1691
1482	1692	jQuery( document ).on( 'frmAfterAddRow', setCustomValidityMessage );
1483	1693	setCustomValidityMessage();
1484	1694	jQuery( document ).on( 'frmFieldChanged', maybeClearCustomValidityMessage );
1485		- },
1486	1695
1487		- getFieldId: function( field, fullID ) {
1488		- return getFieldId( field, fullID );
	1696	+ setSelectPlaceholderColor();
	1697	+
	1698	+ // Elementor popup show event. Fix Elementor Popup && FF Captcha field conflicts
	1699	+ jQuery( document ).on( 'elementor/popup/show', frmRecaptcha );
	1700	+
	1701	+ enableSubmitButtonOnBackButtonPress();
	1702	+ jQuery( document ).on(
	1703	+ 'frmPageChanged',
	1704	+ destroyhCaptcha
	1705	+ );
1489	1706	},
1490	1707
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		- };
	1708	+ getFieldId,
1500	1709
	1710	+ /**
	1711	+ * Render a captcha field.
	1712	+ *
	1713	+ * @param {HTMLElement} captcha
	1714	+ * @param {string} captchaSelector
	1715	+ * @return {void}
	1716	+ */
	1717	+ renderCaptcha: function( captcha, captchaSelector ) {
	1718	+ const rendered = captcha.getAttribute( 'data-rid' ) !== null;
1501	1719	if ( rendered ) {
1502	1720	return;
1503	1721	}
1504	1722
	1723	+ const size = captcha.getAttribute( 'data-size' );
	1724	+ const params = {
	1725	+ sitekey: captcha.getAttribute( 'data-sitekey' ),
	1726	+ size: size,
	1727	+ theme: captcha.getAttribute( 'data-theme' )
	1728	+ };
	1729	+
1505	1730	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();
	1731	+ const formID = captcha.closest( 'form' )?.querySelector( 'input[name="form_id"]' )?.value;
	1732	+
	1733	+ const captchaLabel = captcha.closest( '.frm_form_field' )?.querySelector( '.frm_primary_label' );
	1734	+ if ( captchaLabel ) {
	1735	+ captchaLabel.style.display = 'none';
	1736	+ }
	1737	+
1508	1738	params.callback = function( token ) {
1509	1739	frmFrontForm.afterRecaptcha( token, formID );
1510	1740	};
1511	1741	}
1512	1742
1513		- recaptchaID = grecaptcha.render( captcha.id, params );
	1743	+ const activeCaptcha = getSelectedCaptcha( captchaSelector );
	1744	+ const captchaContainer = typeof turnstile !== 'undefined' && turnstile === activeCaptcha ? '#' + captcha.id : captcha.id;
	1745	+ const captchaID = activeCaptcha.render( captchaContainer, params );
1514	1746
1515		- captcha.setAttribute( 'data-rid', recaptchaID );
	1747	+ captcha.setAttribute( 'data-rid', captchaID );
1516	1748	},
1517	1749
1518	1750	afterSingleRecaptcha: function() {
1519		- var object = jQuery( '.frm-show-form .g-recaptcha' ).closest( 'form' )[0];
	1751	+ const object = jQuery( '.frm-show-form .g-recaptcha' ).closest( 'form' )[0];
1520	1752	frmFrontForm.submitFormNow( object );
1521	1753	},
1522	1754
1523		- afterRecaptcha: function( token, formID ) {
1524		- var object = jQuery( '#frm_form_' + formID + '_container form' )[0];
	1755	+ afterRecaptcha: function( _, formID ) {
	1756	+ const object = jQuery( '#frm_form_' + formID + '_container form' )[0];
1525	1757	frmFrontForm.submitFormNow( object );
1526	1758	},
1527	1759
1528	1760	submitForm: function( e ) {
		@@ -1528,10 +1760,15 @@
1528	1760	submitForm: function( e ) {
1529	1761	frmFrontForm.submitFormManual( e, this );
1530	1762	},
1531	1763
	1764	+ /**
	1765	+ * @param {Event} e
	1766	+ * @param {HTMLElement} object The form object that is being submitted.
	1767	+ * @return {void}
	1768	+ */
1532	1769	submitFormManual: function( e, object ) {
1533		- var isPro, errors,
	1770	+ let isPro, errors,
1534	1771	invisibleRecaptcha = hasInvisibleRecaptcha( object ),
1535	1772	classList = object.className.trim().split( /\s+/gi );
1536	1773
1537	1774	if ( classList && invisibleRecaptcha.length < 1 ) {
		@@ -1546,31 +1783,30 @@
1546	1783	}
1547	1784
1548	1785	e.preventDefault();
1549	1786
1550		- if ( typeof frmProForm !== 'undefined' && typeof frmProForm.submitAllowed === 'function' ) {
1551		- if ( ! frmProForm.submitAllowed( object ) ) {
1552		- return;
1553		- }
	1787	+ if ( typeof frmProForm !== 'undefined' && typeof frmProForm.submitAllowed === 'function' && ! frmProForm.submitAllowed( object ) ) {
	1788	+ return;
1554	1789	}
1555	1790
	1791	+ errors = frmFrontForm.validateFormSubmit( object );
	1792	+ if ( Object.keys( errors ).length !== 0 ) {
	1793	+ return;
	1794	+ }
	1795	+
1556	1796	if ( invisibleRecaptcha.length ) {
1557	1797	showLoadingIndicator( jQuery( object ) );
1558	1798	executeInvisibleRecaptcha( invisibleRecaptcha );
1559	1799	} else {
1560	1800
1561		- errors = frmFrontForm.validateFormSubmit( object );
	1801	+ showSubmitLoading( jQuery( object ) );
1562	1802
1563		- if ( Object.keys( errors ).length === 0 ) {
1564		- showSubmitLoading( jQuery( object ) );
1565		-
1566		- frmFrontForm.submitFormNow( object, classList );
1567		- }
	1803	+ frmFrontForm.submitFormNow( object, classList );
1568	1804	}
1569	1805	},
1570	1806
1571	1807	submitFormNow: function( object ) {
1572		- var hasFileFields, antispamInput,
	1808	+ let hasFileFields, antispamInput,
1573	1809	classList = object.className.trim().split( /\s+/gi );
1574	1810
1575	1811	if ( object.hasAttribute( 'data-token' ) && null === object.querySelector( '[name="antispam_token"]' ) ) {
1576	1812	// include the antispam token on form submit.
		@@ -1580,14 +1816,21 @@
1580	1816	antispamInput.value = object.getAttribute( 'data-token' );
1581	1817	object.appendChild( antispamInput );
1582	1818	}
1583	1819
	1820	+ // Add a unique ID, used for duplicate checks.
	1821	+ const uniqueIDInput = document.createElement( 'input' );
	1822	+ uniqueIDInput.type = 'hidden';
	1823	+ uniqueIDInput.name = 'unique_id';
	1824	+ uniqueIDInput.value = getUniqueKey();
	1825	+ object.appendChild( uniqueIDInput );
	1826	+
1584	1827	if ( classList.indexOf( 'frm_ajax_submit' ) > -1 ) {
1585	1828	hasFileFields = jQuery( object ).find( 'input[type="file"]' ).filter( function() {
1586	1829	return !! this.value;
1587	1830	}).length;
1588	1831	if ( hasFileFields < 1 ) {
1589		- action = jQuery( object ).find( 'input[name="frm_action"]' ).val();
	1832	+ const action = jQuery( object ).find( 'input[name="frm_action"]' ).val();
1590	1833	frmFrontForm.checkFormErrors( object, action );
1591	1834	} else {
1592	1835	object.submit();
1593	1836	}
		@@ -1595,8 +1838,13 @@
1595	1838	object.submit();
1596	1839	}
1597	1840	},
1598	1841
	1842	+ /**
	1843	+ * @param {HTMLElement|Object} object Form object. This might be a jQuery object.
	1844	+ *
	1845	+ * @return {Array} List of errors.
	1846	+ */
1599	1847	validateFormSubmit: function( object ) {
1600	1848	if ( typeof tinyMCE !== 'undefined' && jQuery( object ).find( '.wp-editor-wrap' ).length ) {
1601	1849	tinyMCE.triggerSave();
1602	1850	}
		@@ -1613,14 +1861,18 @@
1613	1861
1614	1862	return jsErrors;
1615	1863	},
1616	1864
	1865	+ /**
	1866	+ * @param {HTMLElement|Object} object Form object. This might be a jQuery object.
	1867	+ * @return {Array} List of errors.
	1868	+ */
1617	1869	getAjaxFormErrors: function( object ) {
1618		- var customErrors, key;
	1870	+ let customErrors, key;
1619	1871
1620	1872	jsErrors = validateForm( object );
1621	1873	if ( typeof frmThemeOverride_jsErrors === 'function' ) { // eslint-disable-line camelcase
1622		- action = jQuery( object ).find( 'input[name="frm_action"]' ).val();
	1874	+ const action = jQuery( object ).find( 'input[name="frm_action"]' ).val();
1623	1875	customErrors = frmThemeOverride_jsErrors( action, object );
1624	1876	if ( Object.keys( customErrors ).length ) {
1625	1877	for ( key in customErrors ) {
1626	1878	jsErrors[ key ] = customErrors[ key ];
		@@ -1627,13 +1879,22 @@
1627	1879	}
1628	1880	}
1629	1881	}
1630	1882
	1883	+ triggerCustomEvent( document, 'frm_get_ajax_form_errors', {
	1884	+ formEl: object,
	1885	+ errors: jsErrors
	1886	+ });
	1887	+
1631	1888	return jsErrors;
1632	1889	},
1633	1890
	1891	+ /**
	1892	+ * @param {HTMLElement|Object} object Form object. This might be a jQuery object.
	1893	+ * @return {void}
	1894	+ */
1634	1895	addAjaxFormErrors: function( object ) {
1635		- var key, $fieldCont;
	1896	+ let key, $fieldCont;
1636	1897	removeAllErrors();
1637	1898
1638	1899	for ( key in jsErrors ) {
1639	1900	$fieldCont = jQuery( object ).find( '#frm_field_' + key + '_container' );
		@@ -1649,31 +1910,20 @@
1649	1910	scrollToFirstField( object );
1650	1911	checkForErrorsAndMaybeSetFocus();
1651	1912	},
1652	1913
1653		- checkFormErrors: function( object, action ) {
1654		- getFormErrors( object, action );
1655		- },
	1914	+ checkFormErrors: getFormErrors,
	1915	+ checkRequiredField,
	1916	+ showSubmitLoading,
	1917	+ removeSubmitLoading,
1656	1918
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	1919	scrollToID: function( id ) {
1670		- var object = jQuery( document.getElementById( id ) );
	1920	+ const object = jQuery( document.getElementById( id ) );
1671	1921	frmFrontForm.scrollMsg( object, false );
1672	1922	},
1673	1923
1674	1924	scrollMsg: function( id, object, animate ) {
1675		- var newPos, m, b, screenTop, screenBottom,
	1925	+ let newPos, m, b, screenTop, screenBottom,
1676	1926	scrollObj = '';
1677	1927	if ( typeof object === 'undefined' ) {
1678	1928	scrollObj = jQuery( document.getElementById( 'frm_form_' + id + '_container' ) );
1679	1929	if ( scrollObj.length < 1 ) {
		@@ -1704,11 +1954,11 @@
1704	1954
1705	1955	if ( newPos > screenBottom || newPos < screenTop ) {
1706	1956	// Not in view
1707	1957	if ( typeof animate === 'undefined' ) {
1708		- jQuery( window ).scrollTop( newPos );
	1958	+ document.documentElement.scrollTop = newPos;
1709	1959	} else {
1710		- jQuery( 'html,body' ).animate({ scrollTop: newPos }, 500 );
	1960	+ animateScroll( screenTop, newPos, 500 );
1711	1961	}
1712	1962	return false;
1713	1963	}
1714	1964	}
		@@ -1716,9 +1966,9 @@
1716	1966
1717	1967	fieldValueChanged: function( e ) {
1718	1968	/*jshint validthis:true */
1719	1969
1720		- var fieldId = frmFrontForm.getFieldId( this, false );
	1970	+ const fieldId = frmFrontForm.getFieldId( this, false );
1721	1971	if ( ! fieldId || typeof fieldId === 'undefined' ) {
1722	1972	return;
1723	1973	}
1724	1974
		@@ -1732,56 +1982,10 @@
1732	1982	maybeValidateChange( this );
1733	1983	}
1734	1984	},
1735	1985
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	1986	escapeHtml: function( text ) {
	1987	+ console.warn( 'DEPRECATED: function frmFrontForm.escapeHtml in v6.17' );
1784	1988	return text
1785	1989	.replace( /&/g, '&amp;' )
1786	1990	.replace( /</g, '&lt;' )
1787	1991	.replace( />/g, '&gt;' )
		@@ -1788,99 +1992,85 @@
1788	1992	.replace( /"/g, '&quot;' )
1789	1993	.replace( /'/g, '&#039;' );
1790	1994	},
1791	1995
	1996	+ /**
	1997	+ * This function was used in old back end code in v2.0.
	1998	+ *
	1999	+ * @param {string} classes
	2000	+ * @return {void}
	2001	+ */
1792	2002	invisible: function( classes ) {
	2003	+ console.warn( 'DEPRECATED: function frmFrontForm.invisible in v6.16.3' );
1793	2004	jQuery( classes ).css( 'visibility', 'hidden' );
1794	2005	},
1795	2006
	2007	+ /**
	2008	+ * This function was used in old back end code in v2.0.
	2009	+ *
	2010	+ * @param {string} classes
	2011	+ * @return {void}
	2012	+ */
1796	2013	visible: function( classes ) {
	2014	+ console.warn( 'DEPRECATED: function frmFrontForm.visible in v6.16.3' );
1797	2015	jQuery( classes ).css( 'visibility', 'visible' );
1798	2016	},
1799	2017
1800		- triggerCustomEvent: triggerCustomEvent
	2018	+ triggerCustomEvent: triggerCustomEvent,
	2019	+ documentOn
1801	2020	};
1802	2021	}
1803		-frmFrontForm = frmFrontFormJS();
1804	2022
	2023	+window.frmFrontForm = frmFrontFormJS();
	2024	+
1805	2025	jQuery( document ).ready( function() {
1806	2026	frmFrontForm.init();
1807	2027	});
1808	2028
1809	2029	function frmRecaptcha() {
1810		- var c, cl,
1811		- captchas = jQuery( '.frm-g-recaptcha' );
1812		- for ( c = 0, cl = captchas.length; c < cl; c++ ) {
1813		- frmFrontForm.renderRecaptcha( captchas[c]);
1814		- }
	2030	+ frmCaptcha( '.frm-g-recaptcha' );
1815	2031	}
1816	2032
1817		-function frmAfterRecaptcha( token ) {
1818		- frmFrontForm.afterSingleRecaptcha( token );
	2033	+function frmTurnstile() {
	2034	+ frmCaptcha( '.cf-turnstile' );
1819	2035	}
1820	2036
1821		-function frmUpdateField( entryId, fieldId, value, message, num ) {
1822		- jQuery( document.getElementById( 'frm_update_field_' + entryId + '_' + fieldId + '_' + num ) ).html( '<span class="frm-loading-img"></span>' );
1823		- jQuery.ajax({
1824		- type: 'POST',
1825		- url: frm_js.ajax_url, // eslint-disable-line camelcase
1826		- data: {
1827		- action: 'frm_entries_update_field_ajax',
1828		- entry_id: entryId,
1829		- field_id: fieldId,
1830		- value: value,
1831		- nonce: frm_js.nonce // eslint-disable-line camelcase
1832		- },
1833		- success: function() {
1834		- if ( message.replace( /^\s+|\s+$/g, '' ) === '' ) {
1835		- jQuery( document.getElementById( 'frm_update_field_' + entryId + '_' + fieldId + '_' + num ) ).fadeOut( 'slow' );
1836		- } else {
1837		- jQuery( document.getElementById( 'frm_update_field_' + entryId + '_' + fieldId + '_' + num ) ).replaceWith( message );
1838		- }
	2037	+function frmCaptcha( captchaSelector ) {
	2038	+ let c;
	2039	+ const captchas = document.querySelectorAll( captchaSelector );
	2040	+ const cl = captchas.length;
	2041	+ for ( c = 0; c < cl; c++ ) {
	2042	+ const closestForm = captchas[c].closest( 'form' );
	2043	+ const formIsVisible = closestForm && closestForm.offsetParent !== null;
	2044	+ const captcha = captchas[c];
	2045	+ if ( ! formIsVisible ) {
	2046	+ // If the form is not visible, try again later in 400ms.
	2047	+ // This fixes issues where the form fades visible on page load.
	2048	+ // Or whne the form is inside of a modal.
	2049	+ const interval = setInterval(
	2050	+ function() {
	2051	+ if ( closestForm && closestForm.offsetParent !== null ) {
	2052	+ frmFrontForm.renderCaptcha( captcha, captchaSelector );
	2053	+ clearInterval( interval );
	2054	+ }
	2055	+ },
	2056	+ 400
	2057	+ );
	2058	+ continue;
1839	2059	}
1840		- });
	2060	+ frmFrontForm.renderCaptcha( captcha, captchaSelector );
	2061	+ }
1841	2062	}
1842	2063
1843		-function frmDeleteEntry( entryId, prefix ) {
1844		- console.warn( 'DEPRECATED: function frmDeleteEntry in v2.0.13 use frmFrontForm.deleteEntry' );
1845		- jQuery( document.getElementById( 'frm_delete_' + entryId ) ).replaceWith( '<span class="frm-loading-img" id="frm_delete_' + entryId + '"></span>' );
1846		- jQuery.ajax({
1847		- type: 'POST',
1848		- url: frm_js.ajax_url, // eslint-disable-line camelcase
1849		- data: {
1850		- action: 'frm_entries_destroy',
1851		- entry: entryId,
1852		- nonce: frm_js.nonce // eslint-disable-line camelcase
1853		- },
1854		- success: function( html ) {
1855		- if ( html.replace( /^\s+|\s+$/g, '' ) === 'success' ) {
1856		- jQuery( document.getElementById( prefix + entryId ) ).fadeOut( 'slow' );
1857		- } else {
1858		- jQuery( document.getElementById( 'frm_delete_' + entryId ) ).replaceWith( html );
1859		- }
1860		- }
1861		- });
	2064	+function getSelectedCaptcha( captchaSelector ) {
	2065	+ if ( captchaSelector === '.frm-g-recaptcha' ) {
	2066	+ return grecaptcha;
	2067	+ }
	2068	+ if ( document.querySelector( '.cf-turnstile' ) ) {
	2069	+ return turnstile;
	2070	+ }
	2071	+ return hcaptcha;
1862	2072	}
1863	2073
1864		-function frmOnSubmit( e ) {
1865		- console.warn( 'DEPRECATED: function frmOnSubmit in v2.0 use frmFrontForm.submitForm' );
1866		- frmFrontForm.submitForm( e, this );
1867		-}
1868		-
1869		-function frm_resend_email( entryId, formId ) { // eslint-disable-line camelcase
1870		- var $link = jQuery( document.getElementById( 'frm_resend_email' ) );
1871		- console.warn( 'DEPRECATED: function frm_resend_email in v2.0' );
1872		- $link.append( '<span class="spinner" style="display:inline"></span>' );
1873		- jQuery.ajax({
1874		- type: 'POST',
1875		- url: frm_js.ajax_url, // eslint-disable-line camelcase
1876		- data: {
1877		- action: 'frm_entries_send_email',
1878		- entry_id: entryId,
1879		- form_id: formId,
1880		- nonce: frm_js.nonce // eslint-disable-line camelcase
1881		- },
1882		- success: function( msg ) {
1883		- $link.replaceWith( msg );
1884		- }
1885		- });
	2074	+function frmAfterRecaptcha( token ) {
	2075	+ frmFrontForm.afterSingleRecaptcha( token );
1886	2076	}