Primefaces open confirm dialog if the form is not fully filled - jsf

Question

Hello I'm trying to solve this problem. Hope you can help me.
I have a question form with optionals question (textfields, checkbox, radiobuttons). I'm trying to open a confirm dialog ("There are some question not answered, are you sure you want to continue? YES/NO") just if there are question unfilled. I can OPEN de dialog to ask for confirmation. But I cant validate if the dialog has to be displayed or it have to be skipped.
<h:form>
<div class="col-xs-12 ctg-home-button center">
<p:commandButton
id="cancel-button"
actionListener="#{answerSurveyView.restart}"
immediate="true"
styleClass="btn btn-default"
title="#{propertiesBean.getProperty('answer.cancel')}"
value="#{propertiesBean.getProperty('answer.cancel')}"
/>
<h:outputText value=" " />
<p:commandButton
id="answer-button"
action="#{answerSurveyView.saveAnswers}"
styleClass="btn btn-default"
title="#{propertiesBean.getProperty('answer.send')}"
update="answer-form"
value="#{propertiesBean.getProperty('answer.send')}"
>
<p:confirm header="Confirmation" message="#{propertiesBean.getProperty('answer.survey-confirmation')}" icon="ui-icon-alert" />
</p:commandButton>
</div>
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
<p:commandButton value="#{propertiesBean.getProperty('answer.send')}" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="#{propertiesBean.getProperty('answer.close')}" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>
</h:form>

Answer 1

Use the rendered attribute of your confirmDialog to indicate whether you want render it or not. Set to the rendered attribute a value returned from your view, indicating whether there are unasnwered questions or not.
Reload your confirmDialog each time the user asnwers a question by using an ajax on event, calling a method on your view to recalculate the unansweredQuestions attribute; and the update attribute with your confirmDialog id as value, so you can set rendered to false once the last question is ansewered.
For instance, if you were using a dropdown to give options for the answer, the code of the page might look like this:
<div class="col-xs-12 ctg-home-button center">
<p:commandButton ....
.....
</div>
<p:selectOneMenu value="#{answerSurveyView.firstQuestionAnswer}">
<p:ajax listener="#{dropdownView.onAnswerSelect}" update="myConfirm" />
<f:selectItem itemLabel="Select option" itemValue="" noSelectionOption="true" />
<f:selectItems value="#{answerSurveyView.firstQuestionAnswerOptions}" />
</p:selectOneMenu>
<p:confirmDialog id='myConfirm' rendered="#{answerSurveyView.unansweredQuestions}" global="true" showEffect="fade" hideEffect="fade">
<p:commandButton value="#{propertiesBean.getProperty('answer.send')}" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="#{propertiesBean.getProperty('answer.close')}" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>
And the code in your view:
// declare unansweredQuestions attribute and set it to false
private boolean unansweredQuestions = false;
// unansweredQuestions getter
public boolean getUnansweredQuestions() {
return unansweredQuestions;
}
// call this method every time a question is answered
// to update the unansweredQuestions value
public void onAnswerSelect() {
unansweredQuestions = foo(); //method returns true if there are questions left and false if not.
}