From 135b0b25d8141fa4e43f672f52c6e18e4982ee90 Mon Sep 17 00:00:00 2001 From: Abdi Tolessa <41271840+AbdiTolesa@users.noreply.github.com> Date: Fri, 27 Mar 2026 20:42:24 +0300 Subject: [PATCH 1/5] Wrap custom html field labels in error class when not --- js/formidable.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/js/formidable.js b/js/formidable.js index 08ed7ebc66..24330d8517 100644 --- a/js/formidable.js +++ b/js/formidable.js @@ -1149,14 +1149,25 @@ function frmFrontFormJS() { frmThemeOverride_frmPlaceError( key, jsErrors ); } else { let errorHtml; + const errorMessage = jsErrors[ key ]; + + const roleString = frm_js.include_alert_role ? 'role="alert"' : ''; + const wrapInErrorClass = html => `
${ html }
`; + if ( jsErrors[ key ].includes( '${ jsErrors[ key ] }`; + errorHtml = wrapInErrorClass( errorMessage ); } + container.insertAdjacentHTML( 'beforeend', errorHtml ); - if ( input ) { if ( ! describedBy ) { describedBy = id; From f69f6b1c738509991bcb46bedc53977d8e906172 Mon Sep 17 00:00:00 2001 From: Abdi Tolessa <41271840+AbdiTolesa@users.noreply.github.com> Date: Fri, 27 Mar 2026 20:45:30 +0300 Subject: [PATCH 2/5] Add comment to clarify code --- js/formidable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/formidable.js b/js/formidable.js index 24330d8517..6622ddd699 100644 --- a/js/formidable.js +++ b/js/formidable.js @@ -1158,7 +1158,7 @@ function frmFrontFormJS() { if ( errorMessage.startsWith( ' Date: Fri, 27 Mar 2026 21:19:31 +0300 Subject: [PATCH 3/5] Refactor code --- js/formidable.js | 44 ++++++++++++++++++++++++-------------------- 1 file changed, 24 insertions(+), 20 deletions(-) diff --git a/js/formidable.js b/js/formidable.js index 6622ddd699..b0e80fa3bf 100644 --- a/js/formidable.js +++ b/js/formidable.js @@ -1132,6 +1132,29 @@ function frmFrontFormJS() { return kvp.join( '&' ); } + /** + * Ensures the error message is wrapped in a div with the frm_error class. + * + * @since x.x + * + * @param {string} errorMessage The error message to wrap. + * @param {string} id The ID to use for the error element. + * @returns {string} The error HTML. + */ + function getErrorHtml( errorMessage, id ) { + const roleString = frm_js.include_alert_role ? 'role="alert"' : ''; + + if ( ! errorMessage.startsWith( '${ errorMessage }`; + } + + const tempDiv = document.createElement( 'div' ); + tempDiv.innerHTML = errorMessage; + tempDiv.firstChild.classList.add( 'frm_error' ); + + return tempDiv.innerHTML; + } + function addFieldError( $fieldCont, key, jsErrors ) { const container = $fieldCont instanceof jQuery ? $fieldCont.get( 0 ) : $fieldCont; @@ -1148,26 +1171,7 @@ function frmFrontFormJS() { if ( typeof frmThemeOverride_frmPlaceError === 'function' ) { // eslint-disable-line camelcase frmThemeOverride_frmPlaceError( key, jsErrors ); } else { - let errorHtml; - const errorMessage = jsErrors[ key ]; - - const roleString = frm_js.include_alert_role ? 'role="alert"' : ''; - const wrapInErrorClass = html => `
${ html }
`; - - if ( jsErrors[ key ].includes( ' Date: Fri, 27 Mar 2026 21:21:58 +0300 Subject: [PATCH 4/5] Update function description --- js/formidable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/formidable.js b/js/formidable.js index b0e80fa3bf..22c2c1d184 100644 --- a/js/formidable.js +++ b/js/formidable.js @@ -1133,7 +1133,7 @@ function frmFrontFormJS() { } /** - * Ensures the error message is wrapped in a div with the frm_error class. + * Returns HTML that is wrapped in the error class so that it can be removed with removeAllErrors(). * * @since x.x * From a1568a909b3b5cacad6d0c5c33e53a68bdc7e08c Mon Sep 17 00:00:00 2001 From: Abdi Tolessa <41271840+AbdiTolesa@users.noreply.github.com> Date: Fri, 27 Mar 2026 21:36:00 +0300 Subject: [PATCH 5/5] Fix eslint errors --- js/formidable.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/js/formidable.js b/js/formidable.js index 22c2c1d184..2d83b42801 100644 --- a/js/formidable.js +++ b/js/formidable.js @@ -1138,8 +1138,9 @@ function frmFrontFormJS() { * @since x.x * * @param {string} errorMessage The error message to wrap. - * @param {string} id The ID to use for the error element. - * @returns {string} The error HTML. + * @param {string} id The ID to use for the error element. + * + * @return {string} The error HTML. */ function getErrorHtml( errorMessage, id ) { const roleString = frm_js.include_alert_role ? 'role="alert"' : ''; @@ -1171,7 +1172,7 @@ function frmFrontFormJS() { if ( typeof frmThemeOverride_frmPlaceError === 'function' ) { // eslint-disable-line camelcase frmThemeOverride_frmPlaceError( key, jsErrors ); } else { - container.insertAdjacentHTML( 'beforeend', getErrorHtml( jsErrors[ key ], id )); + container.insertAdjacentHTML( 'beforeend', getErrorHtml( jsErrors[ key ], id ) ); if ( input ) { if ( ! describedBy ) { describedBy = id;