I created a javascript function to validate form fields made up of the <p:wizard>
component of Primefaces. The function is called through the onnext=""
event of the <p:wizard>
, that is, only when the person clicks next (to go to the next tab). The problem is that my javascript function can not cause <p:wizard>
not to skip the tab if the conditions are not met.
function onnext() {
var nome = document.getElementById('nome');
var cpf = document.getElementById('cpf');
if (nome.value === '') {
alert('Por favor preencha o campo nome');
nome.focus;
return false;
} else if (cpf.value === '') {
alert('Por favor preencha o campo cpf');
cpf.focus;
return false;
}
return true;}
I think the problem is in these return true and false ... but since I do not know what I should return, I ask for help here.
<p:wizard nextLabel="Próximo" onnext="onnext();" flowListener="#{alunoBean.onFlowProcess}">
<p:tab title="Dados Pessoais">
<p:panel header="Dados Pessoais">
<p:messages />
<h:panelGrid columns="2">
<p:outputLabel value="Nome Completo: " for="nome" />
<p:inputText id="nome" value="#{alunoBean.aluno.nome}" />
<p:outputLabel for="cpf" value="CPF: "/>
<p:inputText id="cpf" value="#{alunoBean.aluno.cpf}" />
</h:panelGrid>
</p:panel>
</p:tab>
<p:tab title="Dados Bancários">
</p:tab>
<p:tab title="Dados Familiares">
</p:tab>
With this javascript there, if you do not fill in the fields and click next, it shows alert('');
and jumps to the next tab. From here you can only go back, you can not jump to the next!