0

Estou com o seguinte problema, estou utilizando o Notepad++ como editor, e quando carrego a página HTML e preenche os dados do CPF, nada acontece, não há qualquer resposta.

Minha página HTML é:

 <html>
   <head>
      <script type="text/javascript" src="js/aula09.js"></script>
    </head>
       <body>
      <form id="formulario">
        <fieldset>
        <legend>Validação e Formatação</legend>
        <label for="cpf">CPF:<label>
        <input name="cpf" type="text" />

        <label for="email">Email:<label>
        <input name="email" type="text" />

        <a href="#" onclick="validar()">Validar</a>
        </fieldset>
  </form></body></html>

Meu arquivo JavaScript é:

 function validar(){
    var formulario = document.getElementById("formulario");
    var cpf = formulario.cpf;
    var email = formulario.email;
    var re_cpf = /^([\d]{3})([\d]{3})([\d]{3})([\d]{2})$/;
    var re_email = /^([\w-]+(\.[\w-]+)*@(([\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(\.[a-z]{2})?)$/i;   

    if(re_cpf.test(cpf.value)){
        alert("CPF válido");}
        else{
            alert("CPF inválido");
    }
}

Qual pode ser o problema?

8
  • Pode exibir o html completo do <form> ? Seu JS utiliza algumas informações que você não mostrou no HTML
    – rafaels88
    Commented 31/07/2014 às 23:50
  • 1
    Tem um } a mais no fim do código. Cheque sua identação e verifique o que aparece no console do navegador ao usar a página. Commented 1/08/2014 às 0:16
  • Não sei por que não apareceu o form completo. Vou tentar novamente abaixo:
    – sscarvalho
    Commented 1/08/2014 às 0:30
  • <form id="formulario"> <fieldset> <legend>Validação e Formatação</legend> <label for="cpf">CPF:<label> <input name="cpf" type="text" /> <label for="email">Email:<label> <input name="email" type="text" /> <a href="#" onclick="validar()">Validar</a> </fieldset> </form>
    – sscarvalho
    Commented 1/08/2014 às 0:31
  • rafaels88, realmente existe um "}" a mais, porém mesmo corrigindo esse erro a função continua sem responder. Grato de qualquer forma.
    – sscarvalho
    Commented 1/08/2014 às 0:47

2 Respostas 2

6

O seu problema:

e quando carrego a página HTML e preenche os dados do CPF, nada acontece, não há qualquer resposta.

Ao invés de function validar () {, utilize outro formato de escopo. No caso, validar = function () { // ... }. Veja:

validar = function () {
    var formulario = document.getElementById("formulario");
    var cpf = formulario.cpf;
    var email = formulario.email;
    var re_cpf = /^([\d]{3})([\d]{3})([\d]{3})([\d]{2})$/;
    var re_email = /^([\w-]+(\.[\w-]+)*@(([\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(\.[a-z]{2})?)$/i;   

    if(re_cpf.test(cpf.value)){
        alert("CPF válido");}
        else{
            alert("CPF inválido");
    }
}

Exemplo funcionando no jsFiddle.


Ainda assim, o seu próximo erro é um problema com a expressão regular. Resolvi ele para você:

validar = function () {
    var formulario = document.getElementById("formulario");
    var cpf = formulario.cpf;
    var email = formulario.email;
    var re_cpf = /^([\d]{3})([\d]{3})([\d]{3})([\d]{2})$/;
    var re_email = /^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$/;   

    if(re_cpf.test(cpf.value)){
        alert("CPF válido");}
        else{
            alert("CPF inválido");
    }

    if(re_email.test(email.value)) alert('E-mail válido');
    else alert('E-mail inválido');
}

Exemplo funcionando no jsFiddle (atualizado)


Por que o seu engatilhador onclick não está engatilhando validar()?

Baseado num questionário feito via um comentário do OP – muito bom por sinal! – vou responder essa pergunta com minimalismo:

function x () { 
  // do something
};

O formato acima é chamado de "declaração de função", que, por sua vez, é um modelo onde se salva a função para ser, digamos, usada "mais tarde" – não num primeiro instante. Como você pode ver, nenhuma variável é assinada à ela.

A seguir, o modelo proposto por mim:

x = function () { 
  // do something
};

Ele se chama "expressão de função" em tradução literal. Significa que você assina à "x" uma função para ser usada a qualquer instante em que x for executado.

E qual a diferença prática?

No seu caso específico, você está utilizando o observador onclick "inline"1. O escopo dele é o DOM e vai executar uma função que já existe no momento em que o cliente clicar no elemento que você designou para desencadear a função nomeada por você como validar().

Enquanto validar() for uma função que "ainda" não existe, o seu efeito não será acionado.

Mas como assim "ainda não existe"? Ele existe! Eu escrevi!

Existe, mas o seu <a> ainda não sabe quem é ele. Se você escrever este HTML, o function validar() {} irá funcionar:

<a href="#" onclick="validar()">Validar que funciona</a>

<script>
    function validar() {
        alert('hello!');
    };
</script>

No seu caso, você está escrevendo JavaScript em um arquivo externo (js/aula09.js) e portanto, ele ainda não fora declarado para o DOM.

Ainda não entendi

Se você declarar uma função como previamente explicado no mesmo arquivo em que você a chama, tudo irá funcionar conforme o esperado. Enquanto você não fizer isso, as funções devem ser expressadas – explicadas para o DOM quem é quem.

Para ilustrar, dê uma olhada neste jsFiddle. O JavaScript que está na parte inferior esquerda não irá funcionar enquanto o que está embutido no seu HTML executará o seu papel – isso acontece porque o JavaScript deste quadrado branco inferior é "externo" para o HTML.

Para fins de comparação, se você colocar em um arquivo .js externo este conteúdo:

f = function () {
  alert('Olá!');
};

E colocar em um arquivo .html isto:

<a href="#" onclick="x()">Funciona!</a>
<a href="#" onclick="f()">Também funciona!</a>

<script>
    function x() {
        alert('hello!');
    };
</script>

Perceberá que ambos irão funcionar, exatamente como neste outro jsFiddle.


1: Neste caso, "inline" significa que você está usando de JavaScript via HTML na linha do seu elemento – não é um efeito unobtrusivo.

6
  • Muito obrigado, Guilherme Oderdenge, agora funcionou. Contudo, como gostaria não só de fazer funcionar, mas principalmente de entender o que estou fazendo, gostaria ainda que me esclarecesse a seguinte questão. Estou fazendo um exercício onde o autor usa "function validar () {" ao invés de "validar = function () {". No vídeo ele mostra que funciona do mesmo jeito. Por que comigo só está funcionando o formato de escopo que você sugeriu?
    – sscarvalho
    Commented 1/08/2014 às 16:11
  • @sscarvalho Linda pergunta! Fiz questão de reformular a minha resposta para melhor te esclarecer. Espero que agora fique claro! Commented 1/08/2014 às 16:48
  • O validarQueNaoFunciona funciona sim. Você caiu na pegadinha de escopo do jsfiddle, que coloca os scripts numa função de onload por padrão, retirando-os do escopo global. Sua explicação sobre function x vs x = function está incorreta, na verdade é o contrário: function x(){} sofre hoisting e está disponível desde o topo do script, enquanto em x = function ocorre hoisting somente da declaração de variável, mas não da atribuição do valor.
    – bfavaretto
    Commented 1/08/2014 às 17:50
  • Não é pegadinha, @bfavaretto. Você selecionou No wrap - in <body> – se consultar o DOM, o JavaScript vai estar lá, entrando exatamente na questão por mim levantada onde o escopo se "perder" quando o JavaScript é declarado externamente. Commented 1/08/2014 às 17:57
  • Guilherme, não faz diferença se o arquivo é externo ou não, nem se é carregado no head ou no fim do body. plnkr.co/edit/IblNhkr7klHNELKD989I?p=preview
    – bfavaretto
    Commented 1/08/2014 às 18:02
1

Vi aqui que seu código tem um problema com a expressão regular que vc definiu na variável 're_email'. Com isso o código está quebrando e acaba não executando o seu código.

Além disso tinham algumas tags que não estavam fechadas.

Fiz as correções aqui e agora funciona com o código abaixo. Depois dê uma olhada apenas na expressão que você criou naquela variável 're_email', para validação do e-mail.

Espero ter ajudado. Abraços.

            <html>
                <head><script>
                     function validar(){
                        var formulario = document.getElementById("formulario");
                        alert(formulario);
                        var cpf = formulario.cpf.value;
                        alert(cpf);
                        var email = formulario.email.value;
                        alert(email);
                        var re_cpf = /^([\d]{3})([\d]{3})([\d]{3})([\d]{2})$/;

                        if(re_cpf.test(cpf)){
                        alert("CPF válido");
                        } else {
                        alert("CPF inválido");
                        }
                    }
                </script></head>
                <body>
                    <form id="formulario">
                        <fieldset>
                        <legend>Validação e Formatação</legend>
                        <label for="cpf">CPF:</label>
                        <input name="cpf" type="text" />

                        <label for="email">Email:</label>
                        <input name="email" type="text" />

                        <a href="#" onclick="javascript:validar()">Validar</a>
                        </fieldset>
                    </form>
                </body>
            </html>
5
  • "Invalid regular expression: missing )"
    – bfavaretto
    Commented 1/08/2014 às 1:37
  • Muito obrigado, Dias, agora também está funcionando comigo. Só que estava utilizando arquivos distintos para HTML e JavaScript. E fazendo isso continua ocorrendo o problema. Segue abaixo a forma como escrevi e que acho que deveria funcionar: JavaScript: function validar(){ var formulario = document.getElementById("formulario"); var cpf = formulario.cpf.value; var email = formulario.email.value; var re_cpf = /^([\d]{3})([\d]{3})([\d]{3})([\d]{2})$/; if(re_cpf.test(cpf)){ alert("CPF válido");} else{ alert("CPF inválido"); } }
    – sscarvalho
    Commented 1/08/2014 às 1:42
  • HTML: <html> <head> <script type="text/javascript" src="js/aula09.js"></script> </head> <body> <form id="formulario"> <fieldset> <legend>Validação e Formatação</legend> <label for="cpf">CPF:</label> <input name="cpf" type="text" /> <label for="email">Email:</label> <input name="email" type="text" /> <a href="#" onclick="validar()">Validar</a> </fieldset> </form> </body> </html>
    – sscarvalho
    Commented 1/08/2014 às 1:43
  • Editei minha pergunta.
    – sscarvalho
    Commented 1/08/2014 às 1:59
  • Mude <form id="formulario"> para: <form id="formulario" name="formulario" method="post">, ao invés de usar getElementById, experimente: document.formulario; para cpf: document.formulario.cpf. Você está pegando um atributo do documento do form, e não do dom do objeto renderizado... GetElementById não considera o objeto dom, e sim o elemento renderizado na sua view, que não tem atributos do tipo name por exemplo. Commented 30/10/2017 às 16:08

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 .