AEM 6.2 Forms Hide Button until all mandatory fields are filled

[#1]

Hi,

I recently started using AEM Forms 6.2 for developing adaptive forms and I'm a bit lost. How can I control the visibility of a button in the way, that it will be invisible until every mandatory field has been filled? I know I can use the visual editor to add such rules, but this solution is very cumbersome, as I would have to modify it permanently when adding or removing fields. I'm looking for a more comfortable solution, like a JavaScript that will permanentely check all those mandatory fields. Any ideas about this?

[#2 · Accepted solution]

Have you tried adding your elementValueChange listener in the Initialize of the main Root Panel of your Form?

e.g.

window.guideBridge.on("elementValueChanged", myElementValueChangeHandler);

function myElementValueChangeHandler (event, payload) {    

    myButton.visible = (window.guideBridge.validate()) ? true : false;
}

[#3]

Moris,

Do you have a screenshot of how to do this? I'm trying to do via the Rules Editor on my 6.2 form guideRootPanel, but am not being successful.

Thanks!

[#4]

Try using guideBridege - validate but check for the number of errors produced:

function clickNext(currentPanel){

    var errorList = [];

    try {

  guideBridge.off("validationComplete"); // turned off validation complete here if you have any other events dependant on validation of entire form.

    } catch (e){ }

    guideBridge.validate(errorList,currentPanel.somExpression); // the panel is the area you wish to validate - it can be the entire form.

  turnOnValidationComplete(); // turn back on validation event if you turned it off.

    var numberOfErrors = errorList.length;

// this number will tell you the number of and type of errors.

// code to go forward and backward can be restricted based on the number of errors. In this case, we just let the user move forward.

    if (currentPanel.parent.panel.navigationContext.hasNextItem) {

        // when this item is true, we need to skip to the next section.

      window.guideBridge.setFocus(currentPanel.parent.panel.somExpression,"nextItem",true);

    } else {

       window.guideBridge.setFocus(currentPanel.parent.panel.parent.panel.somExpression, 'nextItem', true)

  }

}

function turnOnValidationComplete(){

  try {

       guideBridge.on("validationComplete", function(event, data) {

  if (data.jsonModel.newText.length > 0)

       alert(Granite.I18n.get("azdes.failedValidate"));

  else

       window.onbeforeunload = null;

  });

  } catch (e){

     console.log("Could not turn validationComplete on");

  }

}

[#5]

You can go to code editor of the button. Add this script to Visiblity Event and return !bPassed. This should help with your use case.

Hope this is the event listener you are looking for.

[#6]

Thanks for the feedback. I've tried to set up an event listener at the initialization event of the button. But so far nothing happens. Here's the script I'm using.

window.addEventListener("bridgeInitializeStart", function(evnt){
guideBridge.on("elementValueChanged",function(event, element){
      var bPassed = window.guideBridge.validate([]);
      //console.log(bPassed);
      if (bPassed === true) {
        setPresence(false);       
      } else {
        setPresence(true);
      }
});
});
function setPresence (bPresence) {
  this.visible = bPresence;
}

How can I define an event listener for adaptive forms? The documentation isn't very precise at this point.

[#7]

You can write a common API which is execute on valueCommit and does this.parent.validate([]). And if that returns true, enable the button else skip that.

Alternate would be to listen to guideBridge event called elementValueChanged which wraps the field object in the event payload. And you could call the similar(as above) API and make the button visible/hidden.

Unfortunately, I don't have snippet available, but git it a shot.