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>