AEM 6.2 Forms Hide Button until all mandatory fields are filled

radzmar

MVP

28-11-2017

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?

View Entire Topic

lesutton1

08-12-2017

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");

  }

}