0
I created a javascript function to validate form fields composed by the component <p:wizard> of the Primefaces. The function is called through the event onnext=""of <p:wizard>, that is, only when the person clicks next (to go to the next tab). The problem is that my javascript function it can not make the <p:wizard> do not skip tab if 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 believe that the problem is in these true and false Return... but as I do not know what should return, I ask for help here to you.
<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 don’t fill in the fields and click next, it shows the alert(''); and already jumps to the next tab. From there you can only return, can not jump to next!
Try it like this
onnext="return onnext();"– Guilherme Nascimento
It’s gotten a little better. Now it shows the Alert and does not jump, but if you fill the fields and go again next, it goes to the next, but from this it does not jump anymore (type to the third tab).
– Luan Silva
Ever tried to put
required="true"in inputText? Like this:<p:inputText id="nome" value="#{alunoBean.aluno.nome}" required="true" />– Sam
I was using this, problem is that I will not use javascript only to force fill fields, I will use for example: phone field, can put 9 or 8 digits; Cpf field, can put 11 or 6 digits (older Cpf’s have less than 11 digits)... and only with the inputMask of the first faces can not do this, I think.
– Luan Silva
@Luansilva is that you have to check which tab this before validating probably, understand? That is to apply a validation by tab
– Guilherme Nascimento
I understand yes, I just have no idea how to do... I don’t have much knowledge of javascript
– Luan Silva
To find the current tab add the widgetVar attribute to the Wizard component, for example:
<p:wizard id="wizard" widgetVar="wizard" nextLabel="Próximo" onnext="onnext();" flowListener="#{alunoBean.onFlowProcess}">and then in your javascript code get the tab index like this:PF('wizard').getStepIndex();– Resende