3
respostas

Problema ao criar código JS - Validação

Olá pessoal Estou fazendo meu primeiro projetinho e estou tentando validar um formulário com o JS, ou seja, quero criar um alerta quando o campo nome, por exemplo não for preenchido. Tentei de variadas formas, mas o alerta não está aparecendo. Vcs poderiam me ajudar com o que estou fazendo de errado? Essa dúvida está tirando minha noites de sono kkkcrying

HTML

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>
            Agendamento - A Casa
        </title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
        <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300&family=Roboto+Slab:wght@200;300&display=swap" rel="stylesheet">
    </head>

    <body>
        <header>
    <div class="caixa">
        <h1><img src="logo-abelha.png" alt="Abelha em preto e branco"> </h1>
            <nav>
                <ul>
                    <li><a href="index.html"> Home </a></li>
                    <li><a href="produtos.html"> Produtos </a></li>
                    <li><a href="agendamento.html"> Agendamento </a></li>
                </ul>
            </nav>
    </div>
        </header>
        <script>
            alert ("Não esqueça de preencher todos os campos ;) ");
        </script>

        <main>
            <form>
                <div>
                <label for="nomesobrenome">Nome e Sobrenome </label>
                <input type="text" id="nomesobrenome" class="input-padrao" placeholder="Nome e Sobrenome" data-tipo="nomesobrenome" >
                <script src="validacao.js"></script>

                <label for="datadeagendamento">Data do agendamento</label>
                <input type="date" onblur = "validaData()" name="agendamento" id="agendamento" min="2021-12-01" max="2021-12-30" placeholder="Data de Agendamento" data-tipo="dataAgendamento" required>
                <span id = "error-data"> </span>
                <br><br>

                <label for="email">E-mail</label>
                <input type="email" onblur = "validarEmail()" onfocus = "redefinirMsg()" id="email" class="input-padrao" placeholder="E-mail" data-tipo="email"required>
                <span id = "error-email"> </span>

                <label for="telefone">Telefone </label>
                <input type="tel" id="telefone" class="input-padrao" placeholder="(99) 9999-9999" pattern="(\([0-9]{2}\))\s([9]{1})?([0-9]{4})-([0-9]{4})" title="Número de telefone precisa ser no formato (99) 9999-9999" data-tipo="telefone"required>

                <label for="mensagem">Mensagem </label>
                <textarea  cols="70" rows="10" id="mensagem" class="input-padrao" placeholder="Deixe a sua mensagem aqui!" required></textarea>
                <div id="falta"></div>
                <br>



        </body>

    </html>

JS


function validar(){
var nome = document.getElementById("nomesobrenome");

if(nomesobrenome.value == ""){
alert("Nome nao informado");

nomesobrenome.focus();
return;

}
   }
3 respostas

Fala Suzana, tudo bem? Espero que sim!

O que esta acontecendo é que você guarda na variável nome o elemento que representa o campo nomesobrenome, mas utiliza nomesobrenome durante o seu código como se fosse uma variável existente porém não existente nenhuma variável com esse nome, então basta fazer essa alteração:

function validar(){
var nome = document.getElementById("nomesobrenome");

if(nome.value == ""){ //Substitui "nomesobrenome" por "nome" que é a variável que você criou
alert("Nome nao informado");

nome.focus(); //Substitui "nomesobrenome" por "nome" que é a variável que você criou
return;

}
   }

Espero ter ajudado, abraços e bons estudos :D

Oi Mateus

Obrigada, mas não funcionou. Não o alerta não apareceu. Eu já tentei de tantas formas, que olha, não sei mais hahaha

Obrigada

Pode mostrar como está o seu código?