Questions on Rules for Adaptive form | Community
Skip to main content
K
kolluax
Level 3
March 9, 2026
Solved

Questions on Rules for Adaptive form

  • March 9, 2026
  • 1 reply
  • 23 views

We are on 6.5.22 Version OnPrem. Running WCM Core version 2.24.6 and Forms Core component version 1.1.78.

We are working in a headless setup. The submit button on the form needs to validate the entire form and highlight fields missing validations. 

I used a button on the click event tried adding validate action. This is only highlighting fields from the panel where i clicked Submit. Submit is directly placed underneath the guide container. So, the experience i am seeing, If i hit submit and go to next panel, i dont see any fields highlighted.

We want to do this because, the react SPA is going to intercept the submit button and parse the DOM to collect all error messages and display as a modal. 

I have noticed some OOTB actions like “navigatebetweenpanels” is missing in OnPrem but avaiable on cloud. Any ideas on how to go about this will be greatly appreciated.

Best answer by Pranay_M

Hi ​@kolluax,

As you mentioned, GuideBridge-based logic will not fire directly on the hosting SPA side since the GuideBridge libraries are not loaded there. Additionally, because you are using Adaptive Form Core Components, you are limited to the visual editor and do not have access to the code editor.

Given these constraints, the recommendation is to let AEM handle as much of the validation logic as possible using the Rule Editor and custom JavaScript functions. The idea is as follows:

Proposed Approach

  1. Author validations in AEM (Rule Editor)

    • Use the Rule Editor to define validation logic.

    • Create custom JS functions within AEM that encapsulate validation rules.

  2. Introduce a lightweight runtime adapter in the SPA

    • React will load a small adapter script at runtime.

    • This adapter will expose a stable global API (e.g., window.__afValidationAdapter) that AEM rule functions can call.

    • If GuideBridge is available at runtime, the adapter can delegate to it.

    • If not, it will fall back to lightweight JavaScript validation logic.

  3. Fail-safe behavior

    • All custom rule functions will include fallback logic so that validations still work in author preview or in environments where the adapter is not yet available.

This approach ensures:

  • Validation logic remains primarily managed in AEM.

  • Minimal coupling between AEM and the hosting SPA.

  • Flexibility for React to enhance or extend validation behavior at runtime.

  • Consistent behavior across author and publish environments.

Next steps would be:

  • Define a minimal validation adapter API (list of required functions).

  • Implement corresponding custom rule functions in AEM.

  • Build and integrate the lightweight adapter into the SPA runtime.

Thanks
Pranay

1 reply

AmitVishwakarma
Community Advisor
AmitVishwakarmaCommunity Advisor
Community Advisor
March 9, 2026

Hi ​@kolluax 

On 6.5 on‑prem, the Rule Editor's "Validate" action only validates the current panel. To validate the entire adaptive form (all panels) from one button, you must call guideBridge.validate() at form level via a code rule. The Cloud‑only navigatebetweenpanels action is not required and is not available on 6.5.

What to do

  1. Keep your Submit button directly under the root guide container (as you already have).
  2. Open Rule Editor on that button -> event: Click -> choose Code Editor (not Visual).
  • Use this script: 
    // Click rule on the submit button
    var errors = [];
    guideBridge.validate(errors, "", true);  // "" = whole form, true = focus first error

    if (errors.length === 0) {
      // No validation errors: let your React SPA take over
      window.dispatchEvent(new CustomEvent("af-valid-submit"));
    }
    // At this point, ALL invalid fields in ALL panels are marked with errors/isValid=false
  • guideBridge.validate(errorList, somExpression, focus) with somExpression == "" (or null) tells AEM to validate the entire adaptive form, not just the current panel.
  • This marks every invalid field across all panels (isValid=false) and shows the standard error messages; your React SPA can then parse the DOM and build the modal exactly as you want.

Notes

 

Amit Vishwakarma - Adobe Commerce Champion 2025 | 16x Adobe certified | 4x Adobe SME
K
kolluaxAuthor
Level 3
March 9, 2026

Hi ​@AmitVishwakarma - Couple of problems with that.

  1. If we use guidebridge these wont fire on the hosting SPA side as guidebridge libraries will not be loaded. 
  2. We are using Adaptive form core components, so the code editor is not available. Just the visual.

Due to the way we are setup on this project, we want AEM to handle as much of validations possible using rule editors and custom JS functions ( React will load these libraries run time). 

Thanks,

Abhishek

P
Adobe Employee
Pranay_MAdobe EmployeeAccepted solution
Adobe Employee
March 10, 2026

Hi ​@kolluax,

As you mentioned, GuideBridge-based logic will not fire directly on the hosting SPA side since the GuideBridge libraries are not loaded there. Additionally, because you are using Adaptive Form Core Components, you are limited to the visual editor and do not have access to the code editor.

Given these constraints, the recommendation is to let AEM handle as much of the validation logic as possible using the Rule Editor and custom JavaScript functions. The idea is as follows:

Proposed Approach

  1. Author validations in AEM (Rule Editor)

    • Use the Rule Editor to define validation logic.

    • Create custom JS functions within AEM that encapsulate validation rules.

  2. Introduce a lightweight runtime adapter in the SPA

    • React will load a small adapter script at runtime.

    • This adapter will expose a stable global API (e.g., window.__afValidationAdapter) that AEM rule functions can call.

    • If GuideBridge is available at runtime, the adapter can delegate to it.

    • If not, it will fall back to lightweight JavaScript validation logic.

  3. Fail-safe behavior

    • All custom rule functions will include fallback logic so that validations still work in author preview or in environments where the adapter is not yet available.

This approach ensures:

  • Validation logic remains primarily managed in AEM.

  • Minimal coupling between AEM and the hosting SPA.

  • Flexibility for React to enhance or extend validation behavior at runtime.

  • Consistent behavior across author and publish environments.

Next steps would be:

  • Define a minimal validation adapter API (list of required functions).

  • Implement corresponding custom rule functions in AEM.

  • Build and integrate the lightweight adapter into the SPA runtime.

Thanks
Pranay

Terms & ConditionsAccessibility statement

Loading footer...