← All changes | js/formidable.js +145 -24 6.3.1 → 6.8 View file →

		@@ -201,11 +201,12 @@
201	201	$form.find( 'a.frm_save_draft' ).css( 'pointer-events', '' );
202	202	}
203	203
204	204	function validateForm( object ) {
205		- var r, rl, n, nl, fields, field, value, requiredFields,
206		- errors = [];
	205	+ var errors, r, rl, n, nl, fields, field, requiredFields;
207	206
	207	+ errors = [];
	208	+
208	209	// Make sure required text field is filled in
209	210	requiredFields = jQuery( object ).find(
210	211	'.frm_required_field:visible input, .frm_required_field:visible select, .frm_required_field:visible textarea'
211	212	).filter( ':not(.frm_optional)' );
		@@ -222,11 +223,18 @@
222	223	fields = jQuery( object ).find( 'input,select,textarea' );
223	224	if ( fields.length ) {
224	225	for ( n = 0, nl = fields.length; n < nl; n++ ) {
225	226	field = fields[n];
226		- if ( '' !== field.value ) {
227		- validateFieldValue( field, errors );
	227	+ if ( '' === field.value ) {
	228	+ if ( 'number' === field.type ) {
	229	+ // A number field will return an empty string when it is invalid.
	230	+ checkValidity( field, errors );
	231	+ }
	232	+ continue;
228	233	}
	234	+
	235	+ validateFieldValue( field, errors );
	236	+ checkValidity( field, errors );
229	237	}
230	238	}
231	239
232	240	errors = validateRecaptcha( object, errors );
		@@ -234,8 +242,33 @@
234	242	return errors;
235	243	}
236	244
237	245	/**
	246	+ * Check the ValidityState interface for the field.
	247	+ * If it is invalid, show an error for it.
	248	+ *
	249	+ * @param {HTMLElement} field
	250	+ * @param {Array} errors
	251	+ * @returns
	252	+ */
	253	+ function checkValidity( field, errors ) {
	254	+ var fieldID;
	255	+ if ( 'object' !== typeof field.validity || false !== field.validity.valid ) {
	256	+ return;
	257	+ }
	258	+
	259	+ fieldID = getFieldId( field, true );
	260	+ if ( 'undefined' === typeof errors[ fieldID ]) {
	261	+ errors[ fieldID ] = getFieldValidationMessage( field, 'data-invmsg' );
	262	+ }
	263	+
	264	+ if ( 'function' === typeof field.reportValidity ) {
	265	+ // This triggers an error pop up.
	266	+ field.reportValidity();
	267	+ }
	268	+ }
	269	+
	270	+ /**
238	271	* @since 5.0.10
239	272	*
240	273	* @param {object} element
241	274	* @param {string} targetClass
		@@ -490,8 +523,45 @@
490	523	}
491	524	}
492	525	}
493	526
	527	+ /**
	528	+ * Set color for select placeholders.
	529	+ *
	530	+ * @since 6.5.1
	531	+ */
	532	+ function setSelectPlaceholderColor() {
	533	+ var selects = document.querySelectorAll( '.form-field select' ),
	534	+ styleElement = document.querySelector( '.with_frm_style' ),
	535	+ textColorDisabled = styleElement ? getComputedStyle( styleElement ).getPropertyValue( '--text-color-disabled' ).trim() : '',
	536	+ changeSelectColor;
	537	+
	538	+ // Exit if there are no select elements or the textColorDisabled property is missing
	539	+ if ( ! selects.length || ! textColorDisabled ) {
	540	+ return;
	541	+ }
	542	+
	543	+ // Function to change the color of a select element
	544	+ changeSelectColor = function( select ) {
	545	+ if ( select.options[select.selectedIndex] && hasClass( select.options[select.selectedIndex], 'frm-select-placeholder' ) ) {
	546	+ select.style.setProperty( 'color', textColorDisabled, 'important' );
	547	+ } else {
	548	+ select.style.color = '';
	549	+ }
	550	+ };
	551	+
	552	+ // Use a loop to iterate through each select element
	553	+ Array.prototype.forEach.call( selects, function( select ) {
	554	+ // Apply the color change to each select element
	555	+ changeSelectColor( select );
	556	+
	557	+ // Add an event listener for future changes
	558	+ select.addEventListener( 'change', function() {
	559	+ changeSelectColor( select );
	560	+ });
	561	+ });
	562	+ }
	563	+
494	564	function hasInvisibleRecaptcha( object ) {
495	565	var recaptcha, recaptchaID, alreadyChecked;
496	566
497	567	if ( isGoingToPrevPage( object ) ) {
		@@ -1128,11 +1198,10 @@
1128	1198	}
1129	1199
1130	1200	function makeHoneypotFieldsUntabbable() {
1131	1201	document.querySelectorAll( '.frm_verify' ).forEach(
1132		- function( wrapper ) {
1133		- var input = wrapper.querySelector( 'input[id^=frm_email]' );
1134		- if ( input ) {
	1202	+ function( input ) {
	1203	+ if ( input.id && 0 === input.id.indexOf( 'frm_email_' ) ) {
1135	1204	input.setAttribute( 'tabindex', -1 );
1136	1205	}
1137	1206	}
1138	1207	);
		@@ -1360,8 +1429,51 @@
1360	1429	runOnLoad();
1361	1430	});
1362	1431	}
1363	1432
	1433	+ function shouldUpdateValidityMessage( target ) {
	1434	+ if ( 'INPUT' !== target.nodeName ) {
	1435	+ return false;
	1436	+ }
	1437	+
	1438	+ if ( ! target.dataset.invmsg ) {
	1439	+ return false;
	1440	+ }
	1441	+
	1442	+ if ( 'text' !== target.getAttribute( 'type' ) ) {
	1443	+ return false;
	1444	+ }
	1445	+
	1446	+ if ( target.classList.contains( 'frm_verify' ) ) {
	1447	+ return false;
	1448	+ }
	1449	+
	1450	+ return true;
	1451	+ }
	1452	+
	1453	+ function maybeClearCustomValidityMessage( event, field ) {
	1454	+ var key,
	1455	+ isInvalid = false;
	1456	+
	1457	+ if ( ! shouldUpdateValidityMessage( field ) ) {
	1458	+ return;
	1459	+ }
	1460	+
	1461	+ for ( key in field.validity ) {
	1462	+ if ( 'customError' === key ) {
	1463	+ continue;
	1464	+ }
	1465	+ if ( 'valid' !== key && field.validity[ key ] === true ) {
	1466	+ isInvalid = true;
	1467	+ break;
	1468	+ }
	1469	+ };
	1470	+
	1471	+ if ( ! isInvalid ) {
	1472	+ field.setCustomValidity( '' );
	1473	+ }
	1474	+ }
	1475	+
1364	1476	function maybeShowNewTabFallbackMessage() {
1365	1477	var messageEl;
1366	1478
1367	1479	if ( ! window.frmShowNewTabFallback ) {
		@@ -1387,25 +1499,11 @@
1387	1499	'invalid',
1388	1500	function( event ) {
1389	1501	var target = event.target;
1390	1502
1391		- if ( 'INPUT' !== target.nodeName ) {
1392		- return;
	1503	+ if ( shouldUpdateValidityMessage( target ) ) {
	1504	+ target.setCustomValidity( target.dataset.invmsg );
1393	1505	}
1394		-
1395		- if ( ! target.dataset.invmsg ) {
1396		- return;
1397		- }
1398		-
1399		- if ( 'text' !== target.getAttribute( 'type' ) ) {
1400		- return;
1401		- }
1402		-
1403		- if ( target.classList.contains( 'frm_verify' ) ) {
1404		- return;
1405		- }
1406		-
1407		- target.setCustomValidity( target.dataset.invmsg );
1408	1506	},
1409	1507	true
1410	1508	);
1411	1509	}
		@@ -1410,8 +1508,21 @@
1410	1508	);
1411	1509	}
1412	1510	}
1413	1511
	1512	+ function enableSubmitButtonOnBackButtonPress() {
	1513	+ window.addEventListener( 'pageshow', function( event ) {
	1514	+ if ( event.persisted ) {
	1515	+ document.querySelectorAll( '.frm_loading_form' ).forEach(
	1516	+ function( form ) {
	1517	+ enableSubmitButton( jQuery( form ) );
	1518	+ }
	1519	+ );
	1520	+ removeSubmitLoading();
	1521	+ }
	1522	+ });
	1523	+ }
	1524	+
1414	1525	return {
1415	1526	init: function() {
1416	1527	maybeAddPolyfills();
1417	1528
		@@ -1451,8 +1562,16 @@
1451	1562	maybeShowNewTabFallbackMessage();
1452	1563
1453	1564	jQuery( document ).on( 'frmAfterAddRow', setCustomValidityMessage );
1454	1565	setCustomValidityMessage();
	1566	+ jQuery( document ).on( 'frmFieldChanged', maybeClearCustomValidityMessage );
	1567	+
	1568	+ setSelectPlaceholderColor();
	1569	+
	1570	+ // Elementor popup show event. Fix Elementor Popup && FF Captcha field conflicts
	1571	+ jQuery( document ).on( 'elementor/popup/show', frmRecaptcha );
	1572	+
	1573	+ enableSubmitButtonOnBackButtonPress();
1455	1574	},
1456	1575
1457	1576	getFieldId: function( field, fullID ) {
1458	1577	return getFieldId( field, fullID );
		@@ -1764,9 +1883,11 @@
1764	1883	},
1765	1884
1766	1885	visible: function( classes ) {
1767	1886	jQuery( classes ).css( 'visibility', 'visible' );
1768		- }
	1887	+ },
	1888	+
	1889	+ triggerCustomEvent: triggerCustomEvent
1769	1890	};
1770	1891	}
1771	1892	frmFrontForm = frmFrontFormJS();
1772	1893