AEM 6.2 Forms Hide Button until all mandatory fields are filled





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?

View Entire Topic



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

function clickNext(currentPanel){

    var errorList = [];

    try {"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.


    } 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)



       window.onbeforeunload = null;


  } catch (e){

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