← All changes | js/formidable.js +96 -7 6.5 → 6.7 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	);
		@@ -1439,8 +1508,21 @@
1439	1508	);
1440	1509	}
1441	1510	}
1442	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	+
1443	1525	return {
1444	1526	init: function() {
1445	1527	maybeAddPolyfills();
1446	1528
		@@ -1481,8 +1563,15 @@
1481	1563
1482	1564	jQuery( document ).on( 'frmAfterAddRow', setCustomValidityMessage );
1483	1565	setCustomValidityMessage();
1484	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();
1485	1574	},
1486	1575
1487	1576	getFieldId: function( field, fullID ) {
1488	1577	return getFieldId( field, fullID );