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;
}
}