-2

Bom pessoal estou praticando um pouco de js com um formulário que deve retornar o texto em cima do mesmo quando ele esquecer de preencher um campo, a função até funciona perfeitamente, contudo ela é executada e some, mesmo colocando "return false" ele rapidamente exibe e some, será que eu estou fazendo algo errado?

        function validaForm(){
        var nome = document.getElementById("nome").value;

        if (nome == ""){
            document.getElementById("campo-obrigatorio").innerHTML = "Preencha o campo nome!";
        }

        return false;
        } 
        
<head>
    <meta charset="utf-8">
    <!-- CSS -->
    <style type="text/css">
        
    </style>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>Teste de formulário</title>
</head>
<body>
    <div class="justify-content-center col-xl-12 align-items-center">
        <h2>Form test com lógica</h2>

        <form method="post" action="">
            <h2 id="campo-obrigatorio"></h2>
            <div>
            <label>Nome:</label>
            <input type="text" name="Nome" id="nome" placeholder="Don Ramon">
            </div>

            <div>
            <label>Email:</label>
            <input type="text" name="Nome" id="email" placeholder="[email protected]">
            </div>

            <div>
                <input type="submit" name="enviar" id="sendform" value="Enviar" onClick="validaForm();">
            </div>
        </form>
    </div>
</body>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

1
  • Por favor, esclareça seu problema ou forneça detalhes adicionais a fim de destacar exatamente o que você precisa. Da forma como está escrito atualmente é difícil dizer com exatidão o que você está perguntando.
    – Comunidade Bot
    Commented 21/10/2021 às 19:26

1 Resposta 1

0

Vejo 2 erros aqui.

  1. Provavelmente você deveria amarrar a sua função não ao onclick do botão, mas sim ao onsubmit do formulário. Isto porque formulários não são só enviados quando se clica no botão, mas também quando apertada a tecla ENTER de qualquer lugar dentro deles.
<form onsubmit="validaForm"> <!-- sem o () -->
  1. Segundo esta resposta, o return false é um comportamento que só existe quando usando o jQuery. Sem o jQuery você tem que usar ambos ev.preventDefault() e ev.stopPropagation().

Ou seja:

function validaForm(formEvent) {
  formEvent.preventDefault()
  formEvent.stopPropagation()
}

Porquê "preventDefault"?

  • A ação padrão do submit do formulário é carregar outra página, postando os dados; Esta chamada bloqueia a ação padrão;
1
  • Obrigado pelo esclarecimento, estou me reciclando nesta questão de front-end, vou seguir suas dicas!
    – QueirozDB
    Commented 21/10/2021 às 19:20

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 .