I'm programming in JSF using Primefaces. In this I have a form that has 4 tabs and I need to check which tab is enabled to be able to call my javascript and validate the data entered the moment the person clicks next in the wizard component of primefaces.
I know that the uninsured tab has this class
ui-wizard-step-title ui-state-default ui-corner-all
And when it is enabled it has this other class as an add-on
ui-wizard-step-title ui-state-default ui-corner-all ui-state-highlight
These classes are inside li and I put a tab1, tab2, tab3, tab4 in each class to be able to use as id, since they are not picking id I do not know why. Prime components have these things.
Then in the function validate below is where I validate the components of each tab, I need to validate the components depending on the tab I'm in, if not, if I'm on tab2 I'll call the script to validate the components of tab1 and this gives error. My intention is to use some IFs. Type if on tab1 do this, tab2 do this.
function validar(){
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
color: #ffffff;
background-color: #0081c2;
}
<ul class="ui-wizard-step-titles ui-helper-reset ui-helper-clearfix">
<li class="ui-wizard-step-title ui-state-default ui-corner-all ui-state-highlight tab1">Dados Pessoais</li>
<li class="ui-wizard-step-title ui-state-default ui-corner-all tab2">Vida Acadêmica</li>
<li class="ui-wizard-step-title ui-state-default ui-corner-all tab3">Vida Profissional</li>
<li class="ui-wizard-step-title ui-state-default ui-corner-all tab4">Dados Familiares</li>
</ul>
<button onclick="validar();">Próximo</button>
The next button there does not work because the button I'm using is the one in the wizard itself, it calls the next tab. And the function I use there to call the script when I click on it is the onnext ();
<p:wizard nextLabel="Próximo" onnext="return onnext();" flowListener="#{alunoBean.onFlowProcess}">