HTML Pagina HTML não instancia arquivo .js

danteerich · 31 de maio de 2021

Este é o meu formulário. não estou conseguindo vincular funções de meu arquivo script.js no meu formulário html.

Por favor se alguém puder me ajudar?

Sou iniciante nessa área, Peço por favor alguma ajuda.

<!DOCTYPE html>
    <html lang="pt-br">
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1"  http-equiv=”Content-Type” content=”text/html; charset=utf-8>
        <!-- Titulo da Página -->
            <title>Desafio para Entrevista</title>
        
        <!-- Herança dos códigos CSS -->
            <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
        
        <!-- Herança dos códigos JavaScript -->
           <script type="text/javascript" src="js/script.js"></script>
          

        </head>
        
        <!-- Corpo da Página -->
        <body>
    
                
                <div class="topnav" nav role="navigation" role="menubar">
                    </br><a class="active" href="index.html" id="idHome"><h2>Home</h2></a>
                    </br><a href="formulario.html"><h2>Formulário</h2></a>
                    </br></br>
                </div>
        </br></br></br></br></br>                        
        <div class="container">
            <div class="row">
                <div class="col-1">
                    <img id="imgtopo" src="Images/projeto_desafio_2.jpg" >
                </div>
            </div>
        </div>          
</br></br>
           
            <!-- Iniciando um Formulário -->
            
            <!-- DIV da tabela e do Formulario -->
                        <div id="tabform">
                        
                           <form id="formulario" action="" method="">
                                <h2>Formulario Cadastral</h2>
                                <table align="center">
                                    
                                        
                                    <th>

                                            <tr>
                                                <td>
                                                    <label for="Insira seu nome">Nome:</label>
                                                    <input type="text" id="nomeid" placeholder="Insira seu nome" maxlength="44" size="50">
                                            </td>
                                            </tr>
                                        </th>
                                        
                                        <th>
                                            <tr>
                                                <td>
                                                    <label for="Digite seu CPF">CPF:</label>
                                                    <input type="text" id="cpfid" placeholder="Digite seu CPF" maxlength="14" size="50">
                                                </td>
                                            </tr>
                                        </th>
                                        
                                        <th>
                                            <tr>
                                                <td>
                                                    <label for="Digite seu RG">RG:</label>
                                                    <input type="text" id="rgid" placeholder="Digite seu RG" maxlength="12"size="50">
                                                </td>
                                            </tr>
                                        </th>
                                                
                                        <th>
                                            <tr>
                                                <td>
                                                    <label for="genero">Sexo</label>
                                                    <select id="genero" name="genero">
                                                     <option value="">Selecione </option>
                                                    <option value="M">Masculino</option>
                                                    <option value="F">Feminino</option>
                                                    </select>
                                                </td>
                                            </tr>
                                        </th>

                                        <th>
                                            <tr>
                                                <td>
                                                    <label for="Digite seu Endereço">End.:</label>
                                                    <input type="text" id="endid" placeholder="Digite seu Endereço" maxlength="44" size="50">
                                                </td>
                                            </tr>
                                        </th>

                                        <th>
                                            <tr>
                                                <td>
                                                    <label for="Numero da Residencia">Nº:</label>
                                                    <input type="text" id="numid" placeholder="Numero da Residência" maxlength="4"size="50">
                                                </td>
                                            </tr>
                                        </th>

                                        <th>
                                            <tr>
                                                <td>
                                                    <label for="Bairro">Bairro:</label>
                                                    <input type="text" id="bairroid" placeholder="Bairro" maxlength="20" size="50">
                                                </td>
                                            </tr>
                                        </th>

                                        <th>
                                            <tr>
                                                <td>
                                                    <label for="Qual sua Cidade">Cidade:</label>
                                                    <input type="text" id="cidadeid" placeholder="Qual sua Cidade" maxlength="20" size="50">
                                                </td>
                                            </tr>
                                        </th>

                                        <th>
                                            <tr>
                                                <td>
                                                    <label for="Que estado você mora">Estado:</label>
                                                    <input type="text" id="estadoid" placeholder="Que estado você mora" maxlength="20"size="50">
                                                </td>
                                            </tr>
                                        </th>

                                        <th>
                                            <tr>
                                                <td>
                                                    <label for="Digite seu CEP">CEP:</label>
                                                    <input type="text" id="cepid" placeholder="Digite seu CEP" maxlength="9" size="50">
                                                </td>
                                            </tr>
                                        </th>

                                        <th>
                                            <tr>
                                                <td>
                                                    <label for="Digite seu Telefone Fixo">Residêncial</label>
                                                    <input type="tel" id="telid" placeholder="(xx) xxxx-xxxx" maxlength="12" name="Digite seu Telefone Fixo" size="50" />
                                                </td>
                                            </tr>
                                        </th>

                                                <th>
                                                    <tr>
                                                        <td>
                                                            <label for="celular">Celular:</label>
                                                            <input type="tel" id="celid" placeholder="(xx) x xxxx-xxxx" maxlength="14" name="celular" size="50"/>
                                                        </td>
                                                    </tr>
                                                </th>
                                        <th>
                                            <tr>
                                                <td>
                                                    <div id="cxtexto">
                                                        <textarea placeholder="Deixe sua opinião"></textarea>
                                                    </div>
                                                <div id="botao">
                                                    <input type="submit" class="enviar" onclick="Enviar();" value="Enviar" />
                                                </div>
                                                </td>
                                            </tr>
                                        </th>
                                            </form>
                                    </th>
                                </table>

                            
                        </div>
    

            <div id="rodape">
            
            <h4>Project by Erich Dante</h4>
                <img class="gama" width="10%" src="Images/gama.png">
                <img class="itau" width="7%"  src="Images/itau.jpg">
            
            </div>  
</body>
</html>

Arquivo JavaScript:

Não consigo entender porque não roda as funções:

//Validar Nome
function validaNome(nomeid) {
       var formulario = document.getElementById("formulario");
      if(nomeid.nome.value == "" || nomeid.nome.value == null || nomeid.nome.value.lenght < 3) {
          alert("Por favor, Digite o seu nome.");
           nomeid.nome.focus();
               return false;
    }
}
    

//validar o CPF digitado

validar = function () {
    var formulario = document.getElementById("formulario");
    var cpfid = formulario.cpf;
    var re_cpfid = /^([\d]{3})([\d]{3})([\d]{3})([\d]{2})$/;

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

//validar o RG digitado

validar = function () {
    var formulario = document.getElementById("formulario");
    var rgid = formulario.rgid;
    var re_rgid = /^([\d]{2})([\d]{3})([\d]{3})([\d]{1})$/;

    if(re_rgid.test(rg.value)){
        alert("RG válido");}
        else{
            alert("RG inválido");
    }

function validaSexo(sexoid) {
     var formulario = document.getElementById("formulario");
     escolhaSexo = -1;
     for(x = sexoid.sexo.lenght -1; x > -1; x--) {
        if(sexoid.sexo[x].checked) {
               escolhaSexo = x;
                      }
    }
        if(escolhaSexo == -1) {
        alert("qual o seu sexo?");
        sexoid.sexo[0].focus();
        return false;
    }
}
//validar CEP
function validaCep(cepid){
        var formulario = document.getElementById("formulario");
            exp = /\d{2}\.\d{3}\-\d{3}/
        if(!exp.test(cepid.value))
                alert('Numero de Cep Valido');
                else{
                    alert('Numero de Cep Invalido!');
}

//validar telefone Fixo
function validaTelefone(telid){
     var formulario = document.getElementById("formulario");  
       exp = /\(\d{2}\)\ \d{4}\-\d{4}/
        if(!exp.test(telid.value))
                alert('Numero de Telefone Invalido!');
                else{
                    alert('Numero de Telefone Invalido!');
}

//validar telefone celular
function validaTelefone(celid){
        var formulario = document.getElementById("formulario");
            exp = /\(\d{2}\)\ \d{5}\-\d{4}/
        if(!exp.test(celid.value))
                alert('Numero de Celular valido!');
            else{
                    alert('Numero de Celular Invalido!');
}

ArThDsL · 31 de maio de 2021

Olá amigo, tente o seguinte:

1. Coloque o arquivo .js no final da página antes do fechamento da tag </body>.

2. Coloque o path do caminho completo (ex. http://localhost/js/arquivo.js).

3. Verifique apertando F12 se há algum erro no console do desenvolvedor ao executar as funções.

Faça uma de cada vez em ordem, sempre mantendo a anterior.

Qualquer coisa estou a disposição, grande abraço!

danteerich · 31 de maio de 2021

24 minutos atrás, ArThDsL disse:

Olá amigo, tente o seguinte:

1. Coloque o arquivo .js no final da página antes do fechamento da tag </body>.

2. Coloque o path do caminho completo (ex. http://localhost/js/arquivo.js).

3. Verifique apertando F12 se há algum erro no console do desenvolvedor ao executar as funções.

Faça uma de cada vez em ordem, sempre mantendo a anterior.

Qualquer coisa estou a disposição, grande abraço!

Boa Madrugada!

Realizei esta alterações que você me informou agora, porém apareceu um erro no atributo onclick

Uncaught ReferenceError: Enviar is not defined

onclick

você poderia me explicar o que eu errei?

34 minutos atrás, ArThDsL disse:

Olá amigo, tente o seguinte:

1. Coloque o arquivo .js no final da página antes do fechamento da tag </body>.

2. Coloque o path do caminho completo (ex. http://localhost/js/arquivo.js).

3. Verifique apertando F12 se há algum erro no console do desenvolvedor ao executar as funções.

Faça uma de cada vez em ordem, sempre mantendo a anterior.

Qualquer coisa estou a disposição, grande abraço!

Apareceu estes erros:

Uncaught ReferenceError: Enviar is not defined

onclick file:///C:/Users/Home-User/Documents/GitHub/Projeto_Desafio_para_Entrevista/formulario.html:1

formulario.html:1:1

Falha no carregamento do <script> com a fonte “c:/Users/Home-User/Documents/GitHub/Projeto_Desafio_para_Entrevista/js/script.js”.

ArThDsL · 31 de maio de 2021

Olá amigo!

Os erros são o seguinte:

“Uncaught ReferenceError” diz que a função Enviar(); presente no OnClick do botão não existe, logo o erro de script diz que não foi possível encontrar o arquivo especificado.

Provavelmente o erro de Uncaught está sendo gerado pois o arquivo .js não está referenciado corretamente…

Caso seu script.js for exatamente idêntico ao exposto acima, informo que o mesmo possui algumas funções duplicadas, incorretas e em falta, mas o primeiro passo seria corrigir o erro de referência para que você possa testar corretamente!

Grande abraço!

danteerich · 31 de maio de 2021

51 minutos atrás, ArThDsL disse:

Olá amigo!

Os erros são o seguinte:

“Uncaught ReferenceError” diz que a função Enviar(); presente no OnClick do botão não existe, logo o erro de script diz que não foi possível encontrar o arquivo especificado.

Provavelmente o erro de Uncaught está sendo gerado pois o arquivo .js não está referenciado corretamente…

Caso seu script.js for exatamente idêntico ao exposto acima, informo que o mesmo possui algumas funções duplicadas, incorretas e em falta, mas o primeiro passo seria corrigir o erro de referência para que você possa testar corretamente!

Grande abraço!

Entendi ! mas não sei corrigir este erro por isso estou pedindo ajuda. não conheço muito de javascript, vi algumas video-aulas mas não consegui resolver. e pelo visto até de lógica estou errando nas funções.