[RESOLVIDO] Problema ao gerar mensagem no componente c\ validação JavaScript antes do submit

26 de julho de 2010 5 respostas

lessandronp 26 de julho de 2010

Fala pessoal, boa noite.
Estou com um problema ao exibir mensagem no componente após efetuar validação via javascript, que não permita o submit da página.
Que faça o mesmo efeito do required=“true”.
Segue um trecho do código…

function validarCPF(campo){
    var cpf = campo.value; 
    //Filtrar o campo para verificar se está com máscara
    var filtro = /^\d{3}.\d{3}.\d{3}-\d{2}$/i;
    if(!filtro.test(cpf)){
        alert('antes');
        FacesContext.getCurrentInstance().addMessage(campo, new FacesMessage(FacesMessage.SEVERITY_INFO, "CPF inválido. Tente novamente...", "CPF inválido. Tente novamente..."));
        alert('depois');
        return false;
    }
...

Tentei colocar um addMessage tentando jogar mensagem no campo que passo como parâmetro, no caso ?iptCpf?, mas infelizmente a mensagem não é exibida. Alguém teria uma solução para esse tipo de contexto? Pois desejo fazer a validação do cpf no cliente e no servidor, ao clicar no botão incluir. Ou seja, a validação só será realizada no servidor após o CPF estive correto ou o javascript não desabilitado.

&lt;p:commandButton  id="cbtIncluir" value="#{msg['botao.incluir']}" rendered="#{clienteController.exibeBotaoIncluir}"
                        onclick=" validarCPF('iptCpf') actionListener="#{clienteController.salvar}" oncomplete="retornaEvento(args)" 
                        update="pnlCentro, iptCpf, oplMensagem" /&gt;

Agradeço desde já pela atenção,
Att,
Lessandro

5 Respostas

lessandronp 26 de jul. de 2010

eh, to vendo q a maioria das pessoas utilizam validação apenas no MB… Mas isso sobrecarrega o servidor…
Será que existe alguém que não utilize apenas essa técnica? Utilize em client-side também? E que ao invés de dar um alert ou apresentar um modal, exiba a msg
no componente assim como o required faz?
Abs,
Lessandro

edu_merckx 27 de jul. de 2010

lessandronp, você pode executar a função validarCPF no evento onsubmit do form:

<form ... onsumit="validarCPF(value)">

e executar o submit na função, caso retore true, assim:

...
        alert("depois");
    }
    <formulario>.submit();

tenho pouco conhecimento em jsf(me parece que é isso que está usando) e pode ser que esse exemplo não sirva…

você também pode usar o jQuery para validação…

até mais…

Hebert_Coelho 27 de jul. de 2010

Eu faço quase igual ao que o edu falou:

<form ... onsumit="return false;">

E no javascript após validar tudo que preciso coloco:

form[0].submit();

Talvez te ajude.

lessandronp 27 de jul. de 2010

Sim, obrigado pelas questões.
Mas isso ajudaria na chamada da função… Mas o problema maior não é esse. Não consegui jogar a mensagem de erro
ao lado do componente, como dito anteriormente sem usar o Alert(). Quando vc utiliza o h:message for=“idComponente” ele
joga a mensagem no componente, queria algo parecido, porém sendo executado dentro da função javascript, ou seja,
exibindo a mensagem ao lado do componente: “Cpf inválido, tente novamente.” sendo gerado por um facesMessage sem ir no MB.
Abs,
Lessandro

lessandronp 28 de jul. de 2010

Ae pessoal, resolvi o problema… Depois de horas quebrando a cabeça aki, utilizando jQuery funcionou… :lol:
Pra quem quiser implementar validação client-side e server-side segue abaixo o código.
Vou passar apenas o client-side, pois o server todo mundo já conhece através da tag validator=#{MB.metodo} e validatorMessage=“xxx”.

Função JavaScript:

&lt;script type="text/javascript"&gt;

                function validaForm() {
                    validacao = true;
                    // Caso o tipo de cliente selecionado seja pessoa fisica
                    if (recuperaValor('somTipoCliente') == 1) {
                        var cpfSemMascara = removeMascara('iptCpf');
                        if (!validaCpf(cpfSemMascara)) {
                            jQuery('#msgCpf').css({'color' : 'red', 'font-size' : '11px', 'font-weight' : 'bold', 'font-style' : 'italic'});
                            jQuery('#msgCpf').text('CPF inválido. Tente novamente.');
                            validacao = false;
                        }
                    // Caso o tipo de cliente selecionado seja pessoa jurídica
                    } else if(recuperaValor('somTipoCliente') == 2) {
                        var cnpjSemMascara = removeMascara('iptCnpj');
                        if (!validaCnpj(cnpjSemMascara)) {
                            jQuery('#msgCnpj').css({'color' : 'red', 'font-size' : '11px', 'font-weight' : 'bold', 'font-style' : 'italic'});
                            jQuery('#msgCnpj').text('CNPJ inválido. Tente novamente.');
                            validacao = false;
                        }
                    }
                    removeMascara('iptCep');
                    return validacao;
                }
            &lt;/script&gt;

Botão de inclusão:

&lt;p:commandButton  id="cbtIncluir" value="#{msg['botao.incluir']}" rendered="#{clienteController.exibeBotaoIncluir}"
                              onclick="return validaForm();" actionListener="#{clienteController.salvar}"
                              oncomplete="retornaEvento(args)" update="pnlCentro, oplMensagem" /&gt;

Quanto à função que valida CPF, CNPJ não vou entrar em detalhes, pois têm inúmeras aí pela net, rsrs.
O mais importante tá ai. Defini 1 id para o meu h:message respectivo ao cpf ou cnpj, e modifiquei o seu conteúdo.

&lt;h:message id="msgCpf" styleClass="fonteAlerta" for="iptCpf" showDetail="true" showSummary="false"
                           rendered="#{clienteController.tipoClienteSelecionado == 1}" /&gt;

Abraços,
Lessandro

Criado 26 de julho de 2010

Ultima resposta 28 de jul. de 2010

Respostas 5

Participantes 3

5 Respostas

Topicos relacionados