1

Olá! Estou com dificuldade em fazer uma validação. É o seguinte... Tenho um form feito dentro dos componentes Primefaces 4.0 que tem os campos "Celular" e "Telefone". Minha intenção é que o form iniciasse com esses dois campos habilitados, mas, quando o cursor do mouse focasse em um deles, o outro ficasse desabilitado, fazendo com que apenas "Celular" ou "Telefone" fosse preenchido pelo usuário.

Pensei em utilizar eventos ajax (focus, blur e keyup ), mas até agora não consegui um resultado bom. Bem, segue minha view:

<h:form>
    <h:panelGrid columns="2">

        <h:outputText value="Telefone: " />
        <p:inputText id="out1" value="#{listenerView.telefone}">
            <p:ajax event="focus" update="out2"
                listener="#{listenerView.handleKeyEvent}"
                disabled="#{listenerView.telefoneNulo}" immediate="true"/>
        </p:inputText>


        <h:outputText value="Celular: " />
        <p:inputText id="out2" value="#{listenerView.celular}">
            <p:ajax event="focus" update="out1"
                listener="#{listenerView.handleKeyEvent}"
                disabled="#{listenerView.celularNulo}" immediate="true" />
        </p:inputText>


    </h:panelGrid>
</h:form>

E meu MB (listenerView.java):

public class listenerView {

private String telefone;
private String celular;
private boolean telefoneNulo;
private boolean celularNulo;

public boolean isTelefoneNulo() {
    return telefoneNulo;
}

public void setTelefoneNulo(boolean telefoneNulo) {
    this.telefoneNulo = telefoneNulo;
}

public boolean isCelularNulo() {
    return celularNulo;
}

public void setCelularNulo(boolean celularNulo) {
    this.celularNulo = celularNulo;
}

public String getTelefone() {
    return telefone;
}

public void setTelefone(String telefone) {
    this.telefone = telefone;
}

public String getCelular() {
    return celular;
}

public void setCelular(String celular) {
    this.celular = celular;
}

public void handleKeyEvent() {
    if (telefone == null) {
        telefoneNulo = true;
    } else {
        if (celular == null) {
            celularNulo = true;
        }
    }
}

}

Alguma ideia do que estou fazendo errado? Obrigada.

2 Respostas 2

0

Alessanda,

A propriedade disabled faz parte, na verdade, do p:inputText. Outra coisa: o immediate é necessário? Caso não, remova-o. Basta colocar o handleKeyEvent para o evento de keyup do inputText. Assim apenas o usuário digitar ou apagar alguma coisa do input, que o outro campo será habilitado ou não.

Segue código funcionando:

Classe ListenerView:

import javax.faces.bean.ManagedBean;

@ManagedBean(name = "listenerView")
public class ListenerView {

    private String telefone;
    private String celular;
    private boolean desabilitarCelular;
    private boolean desabilitarTelefone;

    public String getTelefone() {
        return telefone;
    }

    public void setTelefone(String telefone) {
        this.telefone = telefone;
    }

    public String getCelular() {
        return celular;
    }

    public void setCelular(String celular) {
        this.celular = celular;
    }

    public boolean isDesabilitarCelular() {
        return desabilitarCelular;
    }

    public void setDesabilitarCelular(boolean desabilitarCelular) {
        this.desabilitarCelular = desabilitarCelular;
    }

    public boolean isDesabilitarTelefone() {
        return desabilitarTelefone;
    }

    public void setDesabilitarTelefone(boolean desabilitarTelefone) {
        this.desabilitarTelefone = desabilitarTelefone;
    }

    public void handleKeyEvent() {
        if (telefone != null && telefone.length() > 0) {
            desabilitarCelular = true;
        } else if (celular != null && celular.length() > 0) {
            desabilitarTelefone = true;
        }
    }
}

Trecho do form:

<h:form>
    <h:panelGrid columns="2">

        <h:outputText value="Telefone: " />
        <p:inputText id="telefone" value="#{listenerView.telefone}" disabled="#{listenerView.desabilitarTelefone}">
            <p:ajax event="keyup" update="celular" listener="#{listenerView.handleKeyEvent}" />
        </p:inputText>


        <h:outputText value="Celular: " />
        <p:inputText id="celular" value="#{listenerView.celular}" disabled="#{listenerView.desabilitarCelular}">
            <p:ajax event="keyup" update="telefone" listener="#{listenerView.handleKeyEvent}" />
        </p:inputText>


    </h:panelGrid>
</h:form>

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

Abcs!

3
  • boa noite. Puxa vida, obrigada por me mostrar onde estava errando. Realmente vacilei feio com o campo disabled. Mas, se não for perturbar muito, posso perguntar o porquê de remover o immediate? Ele tem alguma influência negativa de modo geral ou não faz parte de alguma boa prática?
    – Alessandra
    7/04/2016 às 23:10
  • Nesse link: moacirrf.com.br/blog/?p=89, tem uma explicação bem completa 7/04/2016 às 23:14
  • 1
    Obrigada. Foi muito esclarecedor! O artigo que você mandou é muito bom!
    – Alessandra
    7/04/2016 às 23:26
-1

Se você utilizar jquery é bem simples:

$("#out1, #out2").focus(function(){
 $("#out1, #out2").attr("disabled","disabled");
 $(this).removeAttr("disabled");
});
1
  • Usando apenas JavaScript, algum usuário mais espertinho pode burlar isso. Com o JSF a integridade da lógica fica do lado do servidor. 7/04/2016 às 23:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .