← All changes | js/formidable.js +848 -575 6.3 → 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,10 +821,26 @@
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,
	842	+ let defaultResponse, formID, replaceContent, pageOrder, formReturned, contSubmit, delay,
594	843	$fieldCont, key, inCollapsedSection, frmTrigger;
595	844
596	845	defaultResponse = {
597	846	content: '',
		@@ -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,15 +865,22 @@
615	865	triggerCustomEvent( object, 'frmSubmitEvent' );
616	866	return;
617	867	}
618	868
619		- jQuery( document ).trigger( 'frmBeforeFormRedirect', [ object, response ]);
620		- window.location = response.redirect;
621		- } else if ( response.content !== '' ) {
	869	+ if ( response.delay ) {
	870	+ setTimeout( function() {
	871	+ doRedirect( response );
	872	+ }, 1000 * response.delay );
	873	+ } else {
	874	+ doRedirect( response );
	875	+ }
	876	+ }
	877	+
	878	+ if ( 'string' === typeof response.content && response.content !== '' ) {
622	879	// the form or success message was returned
623	880
624	881	if ( shouldTriggerEvent ) {
625		- triggerCustomEvent( object, 'frmSubmitEvent' );
	882	+ triggerCustomEvent( object, 'frmSubmitEvent', { content: response.content });
626	883	return;
627	884	}
628	885
629	886	removeSubmitLoading( jQuery( object ) );
		@@ -638,10 +895,12 @@
638	895	delay = maybeSlideOut( replaceContent, response.content );
639	896
640	897	setTimeout(
641	898	function() {
642		- var container, input, previousInput;
	899	+ let container, input, previousInput;
643	900
	901	+ afterFormSubmittedBeforeReplace( object, response );
	902	+
644	903	replaceContent.replaceWith( response.content );
645	904
646	905	addUrlParam( response );
647	906
		@@ -700,9 +959,9 @@
700	959	}
701	960	}
702	961
703	962	jQuery( object ).find( '.frm-g-recaptcha, .g-recaptcha, .h-captcha' ).each( function() {
704		- var $recaptcha = jQuery( this ),
	963	+ const $recaptcha = jQuery( this ),
705	964	recaptchaID = $recaptcha.data( 'rid' );
706	965
707	966	if ( typeof grecaptcha !== 'undefined' && grecaptcha ) {
708	967	if ( recaptchaID ) {
		@@ -715,8 +974,14 @@
715	974	hcaptcha.reset();
716	975	}
717	976	});
718	977
	978	+ if ( window.turnstile ) {
	979	+ object.querySelectorAll( '.cf-turnstile' ).forEach(
	980	+ turnstileField => turnstileField.dataset.rid && turnstile.reset( turnstileField.dataset.rid )
	981	+ );
	982	+ }
	983	+
719	984	jQuery( document ).trigger( 'frmFormErrors', [ object, response ]);
720	985
721	986	fieldset.removeClass( 'frm_doing_ajax' );
722	987	scrollToFirstField( object );
		@@ -723,9 +988,9 @@
723	988
724	989	if ( contSubmit ) {
725	990	object.submit();
726	991	} else {
727		- jQuery( object ).prepend( response.error_message );
	992	+ object.insertAdjacentHTML( 'afterbegin', response.error_message );
728	993	checkForErrorsAndMaybeSetFocus();
729	994	}
730	995	} else {
731	996	// there may have been a plugin conflict, or the form is not set to submit with ajax
		@@ -744,9 +1009,9 @@
744	1009	postToAjaxUrl( object, data, success, error );
745	1010	}
746	1011
747	1012	function postToAjaxUrl( form, data, success, error ) {
748		- var ajaxUrl, action, ajaxParams;
	1013	+ let ajaxUrl, action, ajaxParams;
749	1014
750	1015	ajaxUrl = frm_js.ajax_url; // eslint-disable-line camelcase
751	1016	action = form.getAttribute( 'action' );
752	1017
		@@ -768,9 +1033,9 @@
768	1033	jQuery.ajax( ajaxParams );
769	1034	}
770	1035
771	1036	function afterFormSubmitted( object, response ) {
772		- var formCompleted = jQuery( response.content ).find( '.frm_message' );
	1037	+ const formCompleted = jQuery( response.content ).find( '.frm_message' );
773	1038	if ( formCompleted.length ) {
774	1039	jQuery( document ).trigger( 'frmFormComplete', [ object, response ]);
775	1040	} else {
776	1041	jQuery( document ).trigger( 'frmPageChanged', [ object, response ]);
		@@ -776,10 +1041,26 @@
776	1041	jQuery( document ).trigger( 'frmPageChanged', [ object, response ]);
777	1042	}
778	1043	}
779	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	+
780	1061	function removeAddedScripts( formContainer, formID ) {
781		- var endReplace = jQuery( '.frm_end_ajax_' + formID );
	1062	+ const endReplace = jQuery( '.frm_end_ajax_' + formID );
782	1063	if ( endReplace.length ) {
783	1064	formContainer.nextUntil( '.frm_end_ajax_' + formID ).remove();
784	1065	endReplace.remove();
785	1066	}
		@@ -785,9 +1066,9 @@
785	1066	}
786	1067	}
787	1068
788	1069	function maybeSlideOut( oldContent, newContent ) {
789		- var c,
	1070	+ let c,
790	1071	newClass = 'frm_slideout';
791	1072	if ( newContent.indexOf( ' frm_slide' ) !== -1 ) {
792	1073	c = oldContent.children();
793	1074	if ( newContent.indexOf( ' frm_going_back' ) !== -1 ) {
		@@ -800,9 +1081,9 @@
800	1081	return 0;
801	1082	}
802	1083
803	1084	function addUrlParam( response ) {
804		- var url;
	1085	+ let url;
805	1086	if ( history.pushState && typeof response.page !== 'undefined' ) {
806	1087	url = addQueryVar( 'frm_page', response.page );
807	1088	window.history.pushState({ 'html': response.html }, '', '?' + url );
808	1089	}
		@@ -808,9 +1089,9 @@
808	1089	}
809	1090	}
810	1091
811	1092	function addQueryVar( key, value ) {
812		- var kvp, i, x;
	1093	+ let kvp, i, x;
813	1094
814	1095	key = encodeURI( key );
815	1096	value = encodeURI( value );
816	1097
		@@ -834,13 +1115,14 @@
834	1115	return kvp.join( '&' );
835	1116	}
836	1117
837	1118	function addFieldError( $fieldCont, key, jsErrors ) {
838		- var input, id, describedBy, roleString;
	1119	+ let input, id, describedBy, roleString;
839	1120	if ( $fieldCont.length && $fieldCont.is( ':visible' ) ) {
840	1121	$fieldCont.addClass( 'frm_blank_field' );
841	1122	input = $fieldCont.find( 'input, select, textarea' );
842		- id = 'frm_error_field_' + key;
	1123	+ id = getErrorElementId( key, input.get( 0 ) );
	1124	+
843	1125	describedBy = input.attr( 'aria-describedby' );
844	1126
845	1127	if ( typeof frmThemeOverride_frmPlaceError === 'function' ) { // eslint-disable-line camelcase
846	1128	frmThemeOverride_frmPlaceError( key, jsErrors );
		@@ -871,15 +1153,41 @@
871	1153	jQuery( document ).trigger( 'frmAddFieldError', [ $fieldCont, key, jsErrors ]);
872	1154	}
873	1155	}
874	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	+ */
875	1179	function removeFieldError( $fieldCont ) {
876		- var errorMessage = $fieldCont.find( '.frm_error' ),
877		- errorId = errorMessage.attr( 'id' ),
878		- input = $fieldCont.find( 'input, select, textarea' ),
879		- 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' );
880	1184
881		- $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	+
882	1190	errorMessage.remove();
883	1191	input.attr( 'aria-invalid', false );
884	1192	input.removeAttr( 'aria-describedby' );
885	1193
		@@ -894,13 +1202,21 @@
894	1202	jQuery( '.form-field .frm_error' ).replaceWith( '' );
895	1203	jQuery( '.frm_error_style' ).remove();
896	1204	}
897	1205
	1206	+ /**
	1207	+ * @param {HTMLElement|Object} object Form object.
	1208	+ * @return {void}
	1209	+ */
898	1210	function scrollToFirstField( object ) {
899		- var field = jQuery( object ).find( '.frm_blank_field' ).first();
900		- if ( field.length ) {
901		- frmFrontForm.scrollMsg( field, object, true );
	1211	+ if ( 'function' === typeof object.get ) {
	1212	+ // Get the HTMLElement from a jQuery object.
	1213	+ object = object.get( 0 );
902	1214	}
	1215	+ const field = object.querySelector( '.frm_blank_field' );
	1216	+ if ( field ) {
	1217	+ frmFrontForm.scrollMsg( jQuery( field ), object, true );
	1218	+ }
903	1219	}
904	1220
905	1221	function showSubmitLoading( $object ) {
906	1222	showLoadingIndicator( $object );
		@@ -915,9 +1231,9 @@
915	1231	}
916	1232	}
917	1233
918	1234	function addLoadingClass( $object ) {
919		- var loadingClass = isGoingToPrevPage( $object ) ? 'frm_loading_prev' : 'frm_loading_form';
	1235	+ const loadingClass = isGoingToPrevPage( $object ) ? 'frm_loading_prev' : 'frm_loading_form';
920	1236
921	1237	$object.addClass( loadingClass );
922	1238	}
923	1239
		@@ -924,10 +1240,10 @@
924	1240	function isGoingToPrevPage( $object ) {
925	1241	return ( typeof frmProForm !== 'undefined' && frmProForm.goingToPreviousPage( $object ) );
926	1242	}
927	1243
928		- function removeSubmitLoading( $object, enable, processesRunning ) {
929		- var loadingForm;
	1244	+ function removeSubmitLoading( _, enable, processesRunning ) {
	1245	+ let loadingForm;
930	1246
931	1247	if ( processesRunning > 0 ) {
932	1248	return;
933	1249	}
		@@ -944,9 +1260,9 @@
944	1260	}
945	1261	}
946	1262
947	1263	function showFileLoading( object ) {
948		- var fileval,
	1264	+ let fileval,
949	1265	loading = document.getElementById( 'frm_loading' );
950	1266	if ( loading !== null ) {
951	1267	fileval = jQuery( object ).find( 'input[type=file]' ).val();
952	1268	if ( typeof fileval !== 'undefined' && fileval !== '' ) {
		@@ -956,69 +1272,8 @@
956	1272	}
957	1273	}
958	1274	}
959	1275
960		- function clearDefault() {
961		- /*jshint validthis:true */
962		- toggleDefault( jQuery( this ), 'clear' );
963		- }
964		-
965		- function replaceDefault() {
966		- /*jshint validthis:true */
967		- toggleDefault( jQuery( this ), 'replace' );
968		- }
969		-
970		- function toggleDefault( $thisField, e ) {
971		- // TODO: Fix this for a default value that is a number or array
972		- var thisVal,
973		- v = $thisField.data( 'frmval' ).replace( /(\n|\r\n)/g, '\r' );
974		- if ( v === '' || typeof v === 'undefined' ) {
975		- return false;
976		- }
977		- thisVal = $thisField.val().replace( /(\n|\r\n)/g, '\r' );
978		-
979		- if ( 'replace' === e ) {
980		- if ( thisVal === '' ) {
981		- $thisField.addClass( 'frm_default' ).val( v );
982		- }
983		- } else if ( thisVal == v ) {
984		- $thisField.removeClass( 'frm_default' ).val( '' );
985		- }
986		- }
987		-
988		- function resendEmail() {
989		- /*jshint validthis:true */
990		- var $link = jQuery( this ),
991		- entryId = this.getAttribute( 'data-eid' ),
992		- formId = this.getAttribute( 'data-fid' ),
993		- label = $link.find( '.frm_link_label' );
994		- if ( label.length < 1 ) {
995		- label = $link;
996		- }
997		- label.append( '<span class="frm-wait"></span>' );
998		-
999		- jQuery.ajax({
1000		- type: 'POST',
1001		- url: frm_js.ajax_url, // eslint-disable-line camelcase
1002		- data: {
1003		- action: 'frm_entries_send_email',
1004		- entry_id: entryId,
1005		- form_id: formId,
1006		- nonce: frm_js.nonce // eslint-disable-line camelcase
1007		- },
1008		- success: function( msg ) {
1009		- var admin = document.getElementById( 'wpbody' );
1010		- if ( admin === null ) {
1011		- label.html( msg );
1012		- } else {
1013		- label.html( '' );
1014		- $link.after( msg );
1015		- }
1016		- }
1017		- });
1018		- return false;
1019		- }
1020		-
1021	1276	/**********************************************
1022	1277	* General Helpers
1023	1278	*********************************************/
1024	1279
		@@ -1023,68 +1278,12 @@
1023	1278	*********************************************/
1024	1279
1025	1280	function confirmClick() {
1026	1281	/*jshint validthis:true */
1027		- var message = jQuery( this ).data( 'frmconfirm' );
	1282	+ const message = jQuery( this ).data( 'frmconfirm' );
1028	1283	return confirm( message );
1029	1284	}
1030	1285
1031		- function toggleDiv() {
1032		- /*jshint validthis:true */
1033		- var div = jQuery( this ).data( 'frmtoggle' );
1034		- if ( jQuery( div ).is( ':visible' ) ) {
1035		- jQuery( div ).slideUp( 'fast' );
1036		- } else {
1037		- jQuery( div ).slideDown( 'fast' );
1038		- }
1039		- return false;
1040		- }
1041		-
1042		- /**********************************************
1043		- * Fallback functions
1044		- *********************************************/
1045		-
1046		- function addTrimFallbackForIE() {
1047		- if ( typeof String.prototype.trim !== 'function' ) {
1048		- String.prototype.trim = function() {
1049		- return this.replace( /^\s+|\s+$/g, '' );
1050		- };
1051		- }
1052		- }
1053		-
1054		- function addFilterFallbackForIE() {
1055		- var t, len, res, thisp, i, val;
1056		-
1057		- if ( ! Array.prototype.filter ) {
1058		-
1059		- Array.prototype.filter = function( fun /*, thisp */ ) {
1060		-
1061		- if ( this === void 0 || this === null ) {
1062		- throw new TypeError();
1063		- }
1064		-
1065		- t = Object( this );
1066		- len = t.length >>> 0;
1067		- if ( typeof fun !== 'function' ) {
1068		- throw new TypeError();
1069		- }
1070		-
1071		- res = [];
1072		- thisp = arguments[1];
1073		- for ( i = 0; i < len; i++ ) {
1074		- if ( i in t ) {
1075		- val = t[i]; // in case fun mutates this
1076		- if ( fun.call( thisp, val, i, t ) ) {
1077		- res.push( val );
1078		- }
1079		- }
1080		- }
1081		-
1082		- return res;
1083		- };
1084		- }
1085		- }
1086		-
1087	1286	/**
1088	1287	* Check for -webkit-box-shadow css value for input:-webkit-autofill selector.
1089	1288	* If this is a match, the User is autofilling the input on a Webkit browser.
1090	1289	* We want to delete the Honeypot field, otherwise it will get triggered as spam on autocomplete.
		@@ -1089,9 +1288,9 @@
1089	1288	* If this is a match, the User is autofilling the input on a Webkit browser.
1090	1289	* We want to delete the Honeypot field, otherwise it will get triggered as spam on autocomplete.
1091	1290	*/
1092	1291	function onHoneypotFieldChange() {
1093		- var css = jQuery( this ).css( 'box-shadow' );
	1292	+ const css = jQuery( this ).css( 'box-shadow' );
1094	1293	if ( css.match( /inset/ ) ) {
1095	1294	this.parentNode.removeChild( this );
1096	1295	}
1097	1296	}
		@@ -1099,17 +1298,9 @@
1099	1298	function maybeMakeHoneypotFieldsUntabbable() {
1100	1299	document.addEventListener( 'keydown', handleKeyUp );
1101	1300
1102	1301	function handleKeyUp( event ) {
1103		- var code;
1104		-
1105		- if ( 'undefined' !== typeof event.key ) {
1106		- code = event.key;
1107		- } else if ( 'undefined' !== typeof event.keyCode && 9 === event.keyCode ) {
1108		- code = 'Tab';
1109		- }
1110		-
1111		- if ( 'Tab' === code ) {
	1302	+ if ( 'Tab' === event.key ) {
1112	1303	makeHoneypotFieldsUntabbable();
1113	1304	document.removeEventListener( 'keydown', handleKeyUp );
1114	1305	}
1115	1306	}
		@@ -1115,11 +1306,10 @@
1115	1306	}
1116	1307
1117	1308	function makeHoneypotFieldsUntabbable() {
1118	1309	document.querySelectorAll( '.frm_verify' ).forEach(
1119		- function( wrapper ) {
1120		- var input = wrapper.querySelector( 'input[id^=frm_email]' );
1121		- if ( input ) {
	1310	+ function( input ) {
	1311	+ if ( input.id && 0 === input.id.indexOf( 'frm_email_' ) ) {
1122	1312	input.setAttribute( 'tabindex', -1 );
1123	1313	}
1124	1314	}
1125	1315	);
		@@ -1131,11 +1321,11 @@
1131	1321	*
1132	1322	* @since 4.10.02
1133	1323	*/
1134	1324	function changeFocusWhenClickComboFieldLabel() {
1135		- var label;
	1325	+ let label;
1136	1326
1137		- var comboInputsContainer = document.querySelectorAll( '.frm_combo_inputs_container' );
	1327	+ const comboInputsContainer = document.querySelectorAll( '.frm_combo_inputs_container' );
1138	1328	comboInputsContainer.forEach( function( inputsContainer ) {
1139	1329	if ( ! inputsContainer.closest( '.frm_form_field' ) ) {
1140	1330	return;
1141	1331	}
		@@ -1144,16 +1334,39 @@
1144	1334	if ( ! label ) {
1145	1335	return;
1146	1336	}
1147	1337
1148		- label.addEventListener( 'click', function( e ) {
	1338	+ label.addEventListener( 'click', function() {
1149	1339	inputsContainer.querySelector( '.frm_form_field:first-child input, .frm_form_field:first-child select, .frm_form_field:first-child textarea' ).focus();
1150	1340	});
1151	1341	});
1152	1342	}
1153	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	+
1154	1367	function checkForErrorsAndMaybeSetFocus() {
1155		- var errors, element, timeoutCallback;
	1368	+ let errors, element, timeoutCallback;
1156	1369
1157	1370	if ( ! frm_js.focus_first_error ) { // eslint-disable-line camelcase
1158	1371	return;
1159	1372	}
		@@ -1166,16 +1379,20 @@
1166	1379	element = errors[0];
1167	1380	do {
1168	1381	element = element.previousSibling;
1169	1382	if ( -1 !== [ 'input', 'select', 'textarea' ].indexOf( element.nodeName.toLowerCase() ) ) {
1170		- element.focus();
	1383	+ focusInput( element );
1171	1384	break;
1172	1385	}
1173	1386
	1387	+ if ( maybeFocusOnComboSubField( element ) ) {
	1388	+ break;
	1389	+ }
	1390	+
1174	1391	if ( 'undefined' !== typeof element.classList ) {
1175	1392	if ( element.classList.contains( 'html-active' ) ) {
1176	1393	timeoutCallback = function() {
1177		- var textarea = element.querySelector( 'textarea' );
	1394	+ const textarea = element.querySelector( 'textarea' );
1178	1395	if ( null !== textarea ) {
1179	1396	textarea.focus();
1180	1397	}
1181	1398	};
		@@ -1193,16 +1410,21 @@
1193	1410	} while ( element.previousSibling );
1194	1411	}
1195	1412
1196	1413	/**
1197		- * Checks if is on IE browser.
	1414	+ * Focus a visible input, or possibly delay the focus event until the form has faded in.
1198	1415	*
1199		- * @since 5.4
	1416	+ * @since 6.16.3
1200	1417	*
1201		- * @return {Boolean}
	1418	+ * @param {HTMLElement} input
	1419	+ * @return {void}
1202	1420	*/
1203		- function isIE() {
1204		- 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	+ }
1205	1427	}
1206	1428
1207	1429	/**
1208	1430	* Does the same as jQuery( document ).on( 'event', 'selector', handler ).
		@@ -1208,12 +1430,12 @@
1208	1430	* Does the same as jQuery( document ).on( 'event', 'selector', handler ).
1209	1431	*
1210	1432	* @since 5.4
1211	1433	*
1212		- * @param {String} event Event name.
1213		- * @param {String} selector Selector.
1214		- * @param {Function} handler Handler.
1215		- * @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`.
1216	1438	*/
1217	1439	function documentOn( event, selector, handler, options ) {
1218	1440	if ( 'undefined' === typeof options ) {
1219	1441	options = false;
		@@ -1219,9 +1441,9 @@
1219	1441	options = false;
1220	1442	}
1221	1443
1222	1444	document.addEventListener( event, function( e ) {
1223		- var target;
	1445	+ let target;
1224	1446
1225	1447	// loop parent nodes from the target to the delegation node.
1226	1448	for ( target = e.target; target && target != this; target = target.parentNode ) {
1227	1449	if ( target && target.matches && target.matches( selector ) ) {
		@@ -1232,15 +1454,15 @@
1232	1454	}, options );
1233	1455	}
1234	1456
1235	1457	function initFloatingLabels() {
1236		- var checkFloatLabel, checkDropdownLabel, checkPlaceholderIE, runOnLoad, selector, floatClass;
	1458	+ let checkFloatLabel, checkDropdownLabel, runOnLoad, selector, floatClass;
1237	1459
1238	1460	selector = '.frm-show-form .frm_inside_container input, .frm-show-form .frm_inside_container select, .frm-show-form .frm_inside_container textarea';
1239	1461	floatClass = 'frm_label_float_top';
1240	1462
1241	1463	checkFloatLabel = function( input ) {
1242		- var container, shouldFloatTop, firstOpt;
	1464	+ let container, shouldFloatTop, firstOpt;
1243	1465
1244	1466	container = input.closest( '.frm_inside_container' );
1245	1467	if ( ! container ) {
1246	1468	return;
		@@ -1257,22 +1479,18 @@
1257	1479	if ( firstOpt.hasAttribute( 'data-label' ) ) {
1258	1480	firstOpt.textContent = firstOpt.getAttribute( 'data-label' );
1259	1481	firstOpt.removeAttribute( 'data-label' );
1260	1482	}
1261		- } else {
1262		- if ( firstOpt.textContent ) {
1263		- firstOpt.setAttribute( 'data-label', firstOpt.textContent );
1264		- firstOpt.textContent = '';
1265		- }
	1483	+ } else if ( firstOpt.textContent ) {
	1484	+ firstOpt.setAttribute( 'data-label', firstOpt.textContent );
	1485	+ firstOpt.textContent = '';
1266	1486	}
1267		- } else if ( isIE() ) {
1268		- checkPlaceholderIE( input );
1269	1487	}
1270	1488	};
1271	1489
1272	1490	checkDropdownLabel = function() {
1273	1491	document.querySelectorAll( '.frm-show-form .frm_inside_container:not(.' + floatClass + ') select' ).forEach( function( input ) {
1274		- var firstOpt = input.querySelector( 'option:first-child' );
	1492	+ const firstOpt = input.querySelector( 'option:first-child' );
1275	1493
1276	1494	if ( firstOpt.textContent ) {
1277	1495	firstOpt.setAttribute( 'data-label', firstOpt.textContent );
1278	1496	firstOpt.textContent = '';
		@@ -1279,27 +1497,8 @@
1279	1497	}
1280	1498	});
1281	1499	};
1282	1500
1283		- checkPlaceholderIE = function( input ) {
1284		- if ( input.value ) {
1285		- // Don't need to handle this case because placeholder isn't shown.
1286		- return;
1287		- }
1288		-
1289		- if ( document.activeElement === input ) {
1290		- if ( input.hasAttribute( 'data-placeholder' ) ) {
1291		- input.placeholder = input.getAttribute( 'data-placeholder' );
1292		- input.removeAttribute( 'data-placeholder' );
1293		- }
1294		- } else {
1295		- if ( input.placeholder ) {
1296		- input.setAttribute( 'data-placeholder', input.placeholder );
1297		- input.placeholder = '';
1298		- }
1299		- }
1300		- };
1301		-
1302	1501	[ 'focus', 'blur', 'change' ].forEach( function( eventName ) {
1303	1502	documentOn(
1304	1503	eventName,
1305	1504	selector,
		@@ -1319,9 +1518,9 @@
1319	1518	checkFloatLabel( document.activeElement );
1320	1519	} else if ( firstLoad ) {
1321	1520	document.querySelectorAll( '.frm_inside_container' ).forEach(
1322	1521	function( container ) {
1323		- var input = container.querySelector( 'input, select, textarea' );
	1522	+ const input = container.querySelector( 'input, select, textarea' );
1324	1523	if ( input && '' !== input.value ) {
1325	1524	checkFloatLabel( input );
1326	1525	}
1327	1526	}
		@@ -1328,14 +1527,8 @@
1328	1527	);
1329	1528	}
1330	1529
1331	1530	checkDropdownLabel();
1332		-
1333		- if ( isIE() ) {
1334		- document.querySelectorAll( selector ).forEach( function( input ) {
1335		- checkPlaceholderIE( input );
1336		- });
1337		- }
1338	1531	};
1339	1532
1340	1533	runOnLoad( true );
1341	1534
		@@ -1347,10 +1540,68 @@
1347	1540	runOnLoad();
1348	1541	});
1349	1542	}
1350	1543
	1544	+ function shouldUpdateValidityMessage( target ) {
	1545	+ if ( 'INPUT' !== target.nodeName ) {
	1546	+ return false;
	1547	+ }
	1548	+
	1549	+ if ( ! target.dataset.invmsg ) {
	1550	+ return false;
	1551	+ }
	1552	+
	1553	+ if ( 'text' !== target.getAttribute( 'type' ) ) {
	1554	+ return false;
	1555	+ }
	1556	+
	1557	+ if ( target.classList.contains( 'frm_verify' ) ) {
	1558	+ return false;
	1559	+ }
	1560	+
	1561	+ return true;
	1562	+ }
	1563	+
	1564	+ function maybeClearCustomValidityMessage( event, field ) {
	1565	+ let key,
	1566	+ isInvalid = false;
	1567	+
	1568	+ if ( ! shouldUpdateValidityMessage( field ) ) {
	1569	+ return;
	1570	+ }
	1571	+
	1572	+ for ( key in field.validity ) {
	1573	+ if ( 'customError' === key ) {
	1574	+ continue;
	1575	+ }
	1576	+ if ( 'valid' !== key && field.validity[ key ] === true ) {
	1577	+ isInvalid = true;
	1578	+ break;
	1579	+ }
	1580	+ };
	1581	+
	1582	+ if ( ! isInvalid ) {
	1583	+ field.setCustomValidity( '' );
	1584	+ }
	1585	+ }
	1586	+
	1587	+ function maybeShowNewTabFallbackMessage() {
	1588	+ let messageEl;
	1589	+
	1590	+ if ( ! window.frmShowNewTabFallback ) {
	1591	+ return;
	1592	+ }
	1593	+
	1594	+ messageEl = document.querySelector( '#frm_form_' + frmShowNewTabFallback.formId + '_container .frm_message' );
	1595	+ if ( ! messageEl ) {
	1596	+ return;
	1597	+ }
	1598	+
	1599	+ messageEl.insertAdjacentHTML( 'beforeend', ' ' + frmShowNewTabFallback.message );
	1600	+ }
	1601	+
1351	1602	function setCustomValidityMessage() {
1352		- var forms, length, index;
	1603	+ let forms, length, index;
1353	1604
1354	1605	forms = document.getElementsByClassName( 'frm-show-form' );
1355	1606	length = forms.length;
1356	1607
		@@ -1357,37 +1608,86 @@
1357	1608	for ( index = 0; index < length; ++index ) {
1358	1609	forms[ index ].addEventListener(
1359	1610	'invalid',
1360	1611	function( event ) {
1361		- var target = event.target;
	1612	+ const target = event.target;
1362	1613
1363		- if ( 'INPUT' !== target.nodeName ) {
1364		- return;
	1614	+ if ( shouldUpdateValidityMessage( target ) ) {
	1615	+ target.setCustomValidity( target.dataset.invmsg );
1365	1616	}
	1617	+ },
	1618	+ true
	1619	+ );
	1620	+ }
	1621	+ }
1366	1622
1367		- if ( ! target.dataset.invmsg ) {
1368		- return;
	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 ) );
1369	1629	}
	1630	+ );
	1631	+ removeSubmitLoading();
	1632	+ }
	1633	+ });
	1634	+ }
1370	1635
1371		- if ( 'text' !== target.getAttribute( 'type' ) ) {
1372		- return;
1373		- }
	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	+ }
1374	1645
1375		- if ( target.classList.contains( 'frm_verify' ) ) {
1376		- return;
1377		- }
	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	+ }
1378	1658
1379		- target.setCustomValidity( target.dataset.invmsg );
1380		- },
1381		- true
1382		- );
	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;
1383	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 */
1384	1686	}
1385	1687
1386	1688	return {
1387	1689	init: function() {
1388		- maybeAddPolyfills();
1389		-
1390	1690	jQuery( document ).off( 'submit.formidable', '.frm-show-form' );
1391	1691	jQuery( document ).on( 'submit.formidable', '.frm-show-form', frmFrontForm.submitForm );
1392	1692
1393	1693	jQuery( '.frm-show-form input[onblur], .frm-show-form textarea[onblur]' ).each( function() {
		@@ -1395,14 +1695,8 @@
1395	1695	jQuery( this ).trigger( 'blur' );
1396	1696	}
1397	1697	});
1398	1698
1399		- jQuery( document ).on( 'focus', '.frm_toggle_default', clearDefault );
1400		- jQuery( document ).on( 'blur', '.frm_toggle_default', replaceDefault );
1401		- jQuery( '.frm_toggle_default' ).trigger( 'blur' );
1402		-
1403		- jQuery( document.getElementById( 'frm_resend_email' ) ).on( 'click', resendEmail );
1404		-
1405	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 );
1406	1700
1407	1701	jQuery( document ).on( 'change', '[id^=frm_email_]', onHoneypotFieldChange );
1408	1702	maybeMakeHoneypotFieldsUntabbable();
		@@ -1407,9 +1701,8 @@
1407	1701	jQuery( document ).on( 'change', '[id^=frm_email_]', onHoneypotFieldChange );
1408	1702	maybeMakeHoneypotFieldsUntabbable();
1409	1703
1410	1704	jQuery( document ).on( 'click', 'a[data-frmconfirm]', confirmClick );
1411		- jQuery( 'a[data-frmtoggle]' ).on( 'click', toggleDiv );
1412	1705
1413	1706	checkForErrorsAndMaybeSetFocus();
1414	1707
1415	1708	// Focus on the first sub field when clicking to the primary label of combo field.
		@@ -1414,56 +1707,76 @@
1414	1707
1415	1708	// Focus on the first sub field when clicking to the primary label of combo field.
1416	1709	changeFocusWhenClickComboFieldLabel();
1417	1710
1418		- // Add fallbacks for IE.
1419		- addTrimFallbackForIE(); // Trim only works in IE10+.
1420		- addFilterFallbackForIE(); // Filter is not supported in any version of IE.
1421		-
1422	1711	initFloatingLabels();
	1712	+ maybeShowNewTabFallbackMessage();
1423	1713
1424	1714	jQuery( document ).on( 'frmAfterAddRow', setCustomValidityMessage );
1425	1715	setCustomValidityMessage();
1426		- },
	1716	+ jQuery( document ).on( 'frmFieldChanged', maybeClearCustomValidityMessage );
1427	1717
1428		- getFieldId: function( field, fullID ) {
1429		- 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	+ );
1430	1728	},
1431	1729
1432		- renderRecaptcha: function( captcha ) {
1433		- var formID, recaptchaID,
1434		- size = captcha.getAttribute( 'data-size' ),
1435		- rendered = captcha.getAttribute( 'data-rid' ) !== null,
1436		- params = {
1437		- 'sitekey': captcha.getAttribute( 'data-sitekey' ),
1438		- 'size': size,
1439		- 'theme': captcha.getAttribute( 'data-theme' )
1440		- };
	1730	+ getFieldId,
1441	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;
1442	1741	if ( rendered ) {
1443	1742	return;
1444	1743	}
1445	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	+
1446	1752	if ( size === 'invisible' ) {
1447		- formID = jQuery( captcha ).closest( 'form' ).find( 'input[name="form_id"]' ).val();
1448		- 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	+
1449	1760	params.callback = function( token ) {
1450	1761	frmFrontForm.afterRecaptcha( token, formID );
1451	1762	};
1452	1763	}
1453	1764
1454		- 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 );
1455	1768
1456		- captcha.setAttribute( 'data-rid', recaptchaID );
	1769	+ captcha.setAttribute( 'data-rid', captchaID );
1457	1770	},
1458	1771
1459	1772	afterSingleRecaptcha: function() {
1460		- var object = jQuery( '.frm-show-form .g-recaptcha' ).closest( 'form' )[0];
	1773	+ const object = jQuery( '.frm-show-form .g-recaptcha' ).closest( 'form' )[0];
1461	1774	frmFrontForm.submitFormNow( object );
1462	1775	},
1463	1776
1464		- afterRecaptcha: function( token, formID ) {
1465		- var object = jQuery( '#frm_form_' + formID + '_container form' )[0];
	1777	+ afterRecaptcha: function( _, formID ) {
	1778	+ const object = jQuery( '#frm_form_' + formID + '_container form' )[0];
1466	1779	frmFrontForm.submitFormNow( object );
1467	1780	},
1468	1781
1469	1782	submitForm: function( e ) {
		@@ -1469,10 +1782,15 @@
1469	1782	submitForm: function( e ) {
1470	1783	frmFrontForm.submitFormManual( e, this );
1471	1784	},
1472	1785
	1786	+ /**
	1787	+ * @param {Event} e
	1788	+ * @param {HTMLElement} object The form object that is being submitted.
	1789	+ * @return {void}
	1790	+ */
1473	1791	submitFormManual: function( e, object ) {
1474		- var isPro, errors,
	1792	+ let isPro, errors,
1475	1793	invisibleRecaptcha = hasInvisibleRecaptcha( object ),
1476	1794	classList = object.className.trim().split( /\s+/gi );
1477	1795
1478	1796	if ( classList && invisibleRecaptcha.length < 1 ) {
		@@ -1487,31 +1805,30 @@
1487	1805	}
1488	1806
1489	1807	e.preventDefault();
1490	1808
1491		- if ( typeof frmProForm !== 'undefined' && typeof frmProForm.submitAllowed === 'function' ) {
1492		- if ( ! frmProForm.submitAllowed( object ) ) {
1493		- return;
1494		- }
	1809	+ if ( typeof frmProForm !== 'undefined' && typeof frmProForm.submitAllowed === 'function' && ! frmProForm.submitAllowed( object ) ) {
	1810	+ return;
1495	1811	}
1496	1812
	1813	+ errors = frmFrontForm.validateFormSubmit( object );
	1814	+ if ( Object.keys( errors ).length !== 0 ) {
	1815	+ return;
	1816	+ }
	1817	+
1497	1818	if ( invisibleRecaptcha.length ) {
1498	1819	showLoadingIndicator( jQuery( object ) );
1499	1820	executeInvisibleRecaptcha( invisibleRecaptcha );
1500	1821	} else {
1501	1822
1502		- errors = frmFrontForm.validateFormSubmit( object );
	1823	+ showSubmitLoading( jQuery( object ) );
1503	1824
1504		- if ( Object.keys( errors ).length === 0 ) {
1505		- showSubmitLoading( jQuery( object ) );
1506		-
1507		- frmFrontForm.submitFormNow( object, classList );
1508		- }
	1825	+ frmFrontForm.submitFormNow( object, classList );
1509	1826	}
1510	1827	},
1511	1828
1512	1829	submitFormNow: function( object ) {
1513		- var hasFileFields, antispamInput,
	1830	+ let hasFileFields, antispamInput,
1514	1831	classList = object.className.trim().split( /\s+/gi );
1515	1832
1516	1833	if ( object.hasAttribute( 'data-token' ) && null === object.querySelector( '[name="antispam_token"]' ) ) {
1517	1834	// include the antispam token on form submit.
		@@ -1521,14 +1838,21 @@
1521	1838	antispamInput.value = object.getAttribute( 'data-token' );
1522	1839	object.appendChild( antispamInput );
1523	1840	}
1524	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	+
1525	1849	if ( classList.indexOf( 'frm_ajax_submit' ) > -1 ) {
1526	1850	hasFileFields = jQuery( object ).find( 'input[type="file"]' ).filter( function() {
1527	1851	return !! this.value;
1528	1852	}).length;
1529	1853	if ( hasFileFields < 1 ) {
1530		- action = jQuery( object ).find( 'input[name="frm_action"]' ).val();
	1854	+ const action = jQuery( object ).find( 'input[name="frm_action"]' ).val();
1531	1855	frmFrontForm.checkFormErrors( object, action );
1532	1856	} else {
1533	1857	object.submit();
1534	1858	}
		@@ -1536,8 +1860,13 @@
1536	1860	object.submit();
1537	1861	}
1538	1862	},
1539	1863
	1864	+ /**
	1865	+ * @param {HTMLElement|Object} object Form object. This might be a jQuery object.
	1866	+ *
	1867	+ * @return {Array} List of errors.
	1868	+ */
1540	1869	validateFormSubmit: function( object ) {
1541	1870	if ( typeof tinyMCE !== 'undefined' && jQuery( object ).find( '.wp-editor-wrap' ).length ) {
1542	1871	tinyMCE.triggerSave();
1543	1872	}
		@@ -1554,14 +1883,18 @@
1554	1883
1555	1884	return jsErrors;
1556	1885	},
1557	1886
	1887	+ /**
	1888	+ * @param {HTMLElement|Object} object Form object. This might be a jQuery object.
	1889	+ * @return {Array} List of errors.
	1890	+ */
1558	1891	getAjaxFormErrors: function( object ) {
1559		- var customErrors, key;
	1892	+ let customErrors, key;
1560	1893
1561	1894	jsErrors = validateForm( object );
1562	1895	if ( typeof frmThemeOverride_jsErrors === 'function' ) { // eslint-disable-line camelcase
1563		- action = jQuery( object ).find( 'input[name="frm_action"]' ).val();
	1896	+ const action = jQuery( object ).find( 'input[name="frm_action"]' ).val();
1564	1897	customErrors = frmThemeOverride_jsErrors( action, object );
1565	1898	if ( Object.keys( customErrors ).length ) {
1566	1899	for ( key in customErrors ) {
1567	1900	jsErrors[ key ] = customErrors[ key ];
		@@ -1568,13 +1901,22 @@
1568	1901	}
1569	1902	}
1570	1903	}
1571	1904
	1905	+ triggerCustomEvent( document, 'frm_get_ajax_form_errors', {
	1906	+ formEl: object,
	1907	+ errors: jsErrors
	1908	+ });
	1909	+
1572	1910	return jsErrors;
1573	1911	},
1574	1912
	1913	+ /**
	1914	+ * @param {HTMLElement|Object} object Form object. This might be a jQuery object.
	1915	+ * @return {void}
	1916	+ */
1575	1917	addAjaxFormErrors: function( object ) {
1576		- var key, $fieldCont;
	1918	+ let key, $fieldCont;
1577	1919	removeAllErrors();
1578	1920
1579	1921	for ( key in jsErrors ) {
1580	1922	$fieldCont = jQuery( object ).find( '#frm_field_' + key + '_container' );
		@@ -1590,31 +1932,20 @@
1590	1932	scrollToFirstField( object );
1591	1933	checkForErrorsAndMaybeSetFocus();
1592	1934	},
1593	1935
1594		- checkFormErrors: function( object, action ) {
1595		- getFormErrors( object, action );
1596		- },
	1936	+ checkFormErrors: getFormErrors,
	1937	+ checkRequiredField,
	1938	+ showSubmitLoading,
	1939	+ removeSubmitLoading,
1597	1940
1598		- checkRequiredField: function( field, errors ) {
1599		- return checkRequiredField( field, errors );
1600		- },
1601		-
1602		- showSubmitLoading: function( $object ) {
1603		- showSubmitLoading( $object );
1604		- },
1605		-
1606		- removeSubmitLoading: function( $object, enable, processesRunning ) {
1607		- removeSubmitLoading( $object, enable, processesRunning );
1608		- },
1609		-
1610	1941	scrollToID: function( id ) {
1611		- var object = jQuery( document.getElementById( id ) );
	1942	+ const object = jQuery( document.getElementById( id ) );
1612	1943	frmFrontForm.scrollMsg( object, false );
1613	1944	},
1614	1945
1615	1946	scrollMsg: function( id, object, animate ) {
1616		- var newPos, m, b, screenTop, screenBottom,
	1947	+ let newPos, m, b, screenTop, screenBottom,
1617	1948	scrollObj = '';
1618	1949	if ( typeof object === 'undefined' ) {
1619	1950	scrollObj = jQuery( document.getElementById( 'frm_form_' + id + '_container' ) );
1620	1951	if ( scrollObj.length < 1 ) {
		@@ -1645,11 +1976,11 @@
1645	1976
1646	1977	if ( newPos > screenBottom || newPos < screenTop ) {
1647	1978	// Not in view
1648	1979	if ( typeof animate === 'undefined' ) {
1649		- jQuery( window ).scrollTop( newPos );
	1980	+ document.documentElement.scrollTop = newPos;
1650	1981	} else {
1651		- jQuery( 'html,body' ).animate({ scrollTop: newPos }, 500 );
	1982	+ animateScroll( screenTop, newPos, 500 );
1652	1983	}
1653	1984	return false;
1654	1985	}
1655	1986	}
		@@ -1657,9 +1988,9 @@
1657	1988
1658	1989	fieldValueChanged: function( e ) {
1659	1990	/*jshint validthis:true */
1660	1991
1661		- var fieldId = frmFrontForm.getFieldId( this, false );
	1992	+ const fieldId = frmFrontForm.getFieldId( this, false );
1662	1993	if ( ! fieldId || typeof fieldId === 'undefined' ) {
1663	1994	return;
1664	1995	}
1665	1996
		@@ -1673,56 +2004,10 @@
1673	2004	maybeValidateChange( this );
1674	2005	}
1675	2006	},
1676	2007
1677		- savingDraft: function( object ) {
1678		- console.warn( 'DEPRECATED: function frmFrontForm.savingDraft in v3.0 use frmProForm.savingDraft' );
1679		- if ( typeof frmProForm !== 'undefined' ) {
1680		- return frmProForm.savingDraft( object );
1681		- }
1682		- },
1683		-
1684		- goingToPreviousPage: function( object ) {
1685		- console.warn( 'DEPRECATED: function frmFrontForm.goingToPreviousPage in v3.0 use frmProForm.goingToPreviousPage' );
1686		- if ( typeof frmProForm !== 'undefined' ) {
1687		- return frmProForm.goingToPreviousPage( object );
1688		- }
1689		- },
1690		-
1691		- hideOrShowFields: function() {
1692		- console.warn( 'DEPRECATED: function frmFrontForm.hideOrShowFields in v3.0 use frmProForm.hideOrShowFields' );
1693		- if ( typeof frmProForm !== 'undefined' ) {
1694		- frmProForm.hideOrShowFields();
1695		- }
1696		- },
1697		-
1698		- hidePreviouslyHiddenFields: function() {
1699		- console.warn( 'DEPRECATED: function frmFrontForm.hidePreviouslyHiddenFields in v3.0 use frmProForm.hidePreviouslyHiddenFields' );
1700		- if ( typeof frmProForm !== 'undefined' ) {
1701		- frmProForm.hidePreviouslyHiddenFields();
1702		- }
1703		- },
1704		-
1705		- checkDependentDynamicFields: function( ids ) {
1706		- console.warn( 'DEPRECATED: function frmFrontForm.checkDependentDynamicFields in v3.0 use frmProForm.checkDependentDynamicFields' );
1707		- if ( typeof frmProForm !== 'undefined' ) {
1708		- frmProForm.checkDependentDynamicFields( ids );
1709		- }
1710		- },
1711		-
1712		- checkDependentLookupFields: function( ids ) {
1713		- console.warn( 'DEPRECATED: function frmFrontForm.checkDependentLookupFields in v3.0 use frmProForm.checkDependentLookupFields' );
1714		- if ( typeof frmProForm !== 'undefined' ) {
1715		- frmProForm.checkDependentLookupFields( ids );
1716		- }
1717		- },
1718		-
1719		- loadGoogle: function() {
1720		- console.warn( 'DEPRECATED: function frmFrontForm.loadGoogle in v3.0 use frmProForm.loadGoogle' );
1721		- frmProForm.loadGoogle();
1722		- },
1723		-
1724	2008	escapeHtml: function( text ) {
	2009	+ console.warn( 'DEPRECATED: function frmFrontForm.escapeHtml in v6.17' );
1725	2010	return text
1726	2011	.replace( /&/g, '&amp;' )
1727	2012	.replace( /</g, '&lt;' )
1728	2013	.replace( />/g, '&gt;' )
		@@ -1729,97 +2014,85 @@
1729	2014	.replace( /"/g, '&quot;' )
1730	2015	.replace( /'/g, '&#039;' );
1731	2016	},
1732	2017
	2018	+ /**
	2019	+ * This function was used in old back end code in v2.0.
	2020	+ *
	2021	+ * @param {string} classes
	2022	+ * @return {void}
	2023	+ */
1733	2024	invisible: function( classes ) {
	2025	+ console.warn( 'DEPRECATED: function frmFrontForm.invisible in v6.16.3' );
1734	2026	jQuery( classes ).css( 'visibility', 'hidden' );
1735	2027	},
1736	2028
	2029	+ /**
	2030	+ * This function was used in old back end code in v2.0.
	2031	+ *
	2032	+ * @param {string} classes
	2033	+ * @return {void}
	2034	+ */
1737	2035	visible: function( classes ) {
	2036	+ console.warn( 'DEPRECATED: function frmFrontForm.visible in v6.16.3' );
1738	2037	jQuery( classes ).css( 'visibility', 'visible' );
1739		- }
	2038	+ },
	2039	+
	2040	+ triggerCustomEvent: triggerCustomEvent,
	2041	+ documentOn
1740	2042	};
1741	2043	}
1742		-frmFrontForm = frmFrontFormJS();
1743	2044
	2045	+window.frmFrontForm = frmFrontFormJS();
	2046	+
1744	2047	jQuery( document ).ready( function() {
1745	2048	frmFrontForm.init();
1746	2049	});
1747	2050
1748	2051	function frmRecaptcha() {
1749		- var c, cl,
1750		- captchas = jQuery( '.frm-g-recaptcha' );
1751		- for ( c = 0, cl = captchas.length; c < cl; c++ ) {
1752		- frmFrontForm.renderRecaptcha( captchas[c]);
1753		- }
	2052	+ frmCaptcha( '.frm-g-recaptcha' );
1754	2053	}
1755	2054
1756		-function frmAfterRecaptcha( token ) {
1757		- frmFrontForm.afterSingleRecaptcha( token );
	2055	+function frmTurnstile() {
	2056	+ frmCaptcha( '.cf-turnstile' );
1758	2057	}
1759	2058
1760		-function frmUpdateField( entryId, fieldId, value, message, num ) {
1761		- jQuery( document.getElementById( 'frm_update_field_' + entryId + '_' + fieldId + '_' + num ) ).html( '<span class="frm-loading-img"></span>' );
1762		- jQuery.ajax({
1763		- type: 'POST',
1764		- url: frm_js.ajax_url, // eslint-disable-line camelcase
1765		- data: {
1766		- action: 'frm_entries_update_field_ajax',
1767		- entry_id: entryId,
1768		- field_id: fieldId,
1769		- value: value,
1770		- nonce: frm_js.nonce // eslint-disable-line camelcase
1771		- },
1772		- success: function() {
1773		- if ( message.replace( /^\s+|\s+$/g, '' ) === '' ) {
1774		- jQuery( document.getElementById( 'frm_update_field_' + entryId + '_' + fieldId + '_' + num ) ).fadeOut( 'slow' );
1775		- } else {
1776		- jQuery( document.getElementById( 'frm_update_field_' + entryId + '_' + fieldId + '_' + num ) ).replaceWith( message );
1777		- }
	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;
1778	2081	}
1779		- });
	2082	+ frmFrontForm.renderCaptcha( captcha, captchaSelector );
	2083	+ }
1780	2084	}
1781	2085
1782		-function frmDeleteEntry( entryId, prefix ) {
1783		- console.warn( 'DEPRECATED: function frmDeleteEntry in v2.0.13 use frmFrontForm.deleteEntry' );
1784		- jQuery( document.getElementById( 'frm_delete_' + entryId ) ).replaceWith( '<span class="frm-loading-img" id="frm_delete_' + entryId + '"></span>' );
1785		- jQuery.ajax({
1786		- type: 'POST',
1787		- url: frm_js.ajax_url, // eslint-disable-line camelcase
1788		- data: {
1789		- action: 'frm_entries_destroy',
1790		- entry: entryId,
1791		- nonce: frm_js.nonce // eslint-disable-line camelcase
1792		- },
1793		- success: function( html ) {
1794		- if ( html.replace( /^\s+|\s+$/g, '' ) === 'success' ) {
1795		- jQuery( document.getElementById( prefix + entryId ) ).fadeOut( 'slow' );
1796		- } else {
1797		- jQuery( document.getElementById( 'frm_delete_' + entryId ) ).replaceWith( html );
1798		- }
1799		- }
1800		- });
	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;
1801	2094	}
1802	2095
1803		-function frmOnSubmit( e ) {
1804		- console.warn( 'DEPRECATED: function frmOnSubmit in v2.0 use frmFrontForm.submitForm' );
1805		- frmFrontForm.submitForm( e, this );
1806		-}
1807		-
1808		-function frm_resend_email( entryId, formId ) { // eslint-disable-line camelcase
1809		- var $link = jQuery( document.getElementById( 'frm_resend_email' ) );
1810		- console.warn( 'DEPRECATED: function frm_resend_email in v2.0' );
1811		- $link.append( '<span class="spinner" style="display:inline"></span>' );
1812		- jQuery.ajax({
1813		- type: 'POST',
1814		- url: frm_js.ajax_url, // eslint-disable-line camelcase
1815		- data: {
1816		- action: 'frm_entries_send_email',
1817		- entry_id: entryId,
1818		- form_id: formId,
1819		- nonce: frm_js.nonce // eslint-disable-line camelcase
1820		- },
1821		- success: function( msg ) {
1822		- $link.replaceWith( msg );
1823		- }
1824		- });
	2096	+function frmAfterRecaptcha( token ) {
	2097	+ frmFrontForm.afterSingleRecaptcha( token );
1825	2098	}