Validar formulário Javascript
Bom dia.
Sou iniciante e fiz esse formulário usando uma função Javascript para validar os campos preenchidos. Porém ele nao esta verificando, já pula para a pagina de Cadastrado com Sucesso.
Se alguem puder me ajudar a achar o erro, obrigado!
HTML1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Cadastro</title>
<link href="pratica12exercicio06.css" type="text/css" rel="stylesheet"/>
<script src="pratica12exercicio06.js" type="text/javascript"></script>
</head>
<body>
<main>
<form action="pratica12exercicio06Resp.html" method="get">
<fieldset>
<br>
<tr>
<td>
<label for="login">Login:</label>
</td>
<td>
<input type="text" id="login" name="campoLogin" />
</td>
</tr>
<br>
<tr>
<td>
<label for="email">E-mail:</label>
</td>
<td>
<input type="text" id="email" name="campoEmail" />
</td>
</tr>
<br>
<tr>
<td>
<label for="datanasc">Data de nascimento:</label>
</td>
<td>
<input type="text" id="datanasc" name="campoDataNascimento" />
</td>
</tr>
<br>
<tr>
<td>
<label for="senha">Senha:</label>
</td>
<td>
<input type="text" id="senha" name="campoSenha" />
</td>
</tr>
<br>
<tr>
<td>
<label for="csenha">Confirmar senha:</label>
</td>
<td>
<input type="text" id="csenha" name="campoCSenha" />
</td>
</tr>
<br>
<tr>
<td>
<label for="sexo">Sexo:</label>
</td>
<td>
<select id="sexo" name="campoSexo">
<option value=""></option>
<option value="1">Feminino</option>
<option value="2">Masculino</option>
</select>
</td>
</tr>
<br>
<tr>
<td>
<label for="cidade">Cidade:</label>
</td>
<td>
<input type="text" id="cidade" name="campoCidade" />
</td>
</tr>
<br>
<tr>
<td>
<label for="home">Home-Page:</label>
</td>
<td>
<input type="text" id="home" name="campoHome" />
</td>
</tr>
<br>
<tr>
<td>
<label for="interesse">Interesses:</label>:</label>
</td>
<td>
<label>
<input name="campoInt" id="musica" type="checkbox"/> Música</label>
<label>
<input name="campoInt" id="esporte" type="checkbox"/> Esporte</label>
<label>
<input name="campoInt" id="moda" type="checkbox" /> Moda</label>
</td>
</tr>
<br><input id="res" class="botao" type="reset" value="Limpar" onclick="limpar();"/>
<input type="submit" value="Cadastrar" name="botaoCadastrar"onclick="return validar();"/>
</fieldset>
</form>
</main>
</body>
</html>
HTML2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Validação de Formulário</title>
<link href="pratica12exercicio06.css" type="text/css" rel="stylesheet">
<script src="pratica12exercicio06.js" type="text/javascript"></script>
</head>
<body>
<main>
<div class="quadro">
<h1>Cadastro</h1>
<div class="resp">Dados cadastrados com sucesso!</div>
<a href="pratica12exercicio06.html">
<div class="botao"> Voltar</div>
</a>
</div>
</main>
</body>
</html>
JS:
function validar() {
var mensagemErro = "";
if (document.getElementById ("login").value == "") {
mensagemErro = "Informe o login.";
}
if (document.getElementById ("email").value == "") {
mensagemErro += "\nInforme o email.";
}
if (document.getElementById ("datanasc").value == "") {
mensagemErro += "\nInforme a data de nascimento.";
}
if (document.getElementById ("senha").value == "") {
mensagemErro += "\nInforme a senha.";
}
if (document.getElementById ("vsenha").value == "") {
mensagemErro += "\nInforme a confirmação de senha.";
}
if (document.getElementById ("senha").value != document.getElementById ("vsenha").value) {
mensagemErro += "\nAs senhas estão diferentes.";}
if (document.getElementById ("cidade").value == "") {
mensagemErro += "\nInforme a cidade.";
}
if (document.getElementById ("home").value == "") {
mensagemErro += "\nInforme a Home-page.";
}
if (document.getElementById ("interesse").value == "") {
mensagemErro += "\nInforme os interesses.";
}
var opcoesSexo = document.getElementsByName ("campoSexo");
var sexoPreenchido = false;
for (var i = 0; i < opcoesSexo.length; i++) {
if (opcoesSexo[i].checked) {
sexoPreenchido = true;
}
}
if (!sexoPreenchido) {
mensagemErro += "\nInforme o sexo.";
}
if (mensagemErro == "") {
return true;
} else {
alert (mensagemErro);
return false;
}
}
CSS:
fieldset, .quadro {
border: 5px solid black;
background-color: rgb(231, 231, 231);
width: 350px;
height: 300px;
line-height:1.5; /*espaçamento linhas*/
}
.botao{
height: 20px;
width: 70px;
}Discussão (2)
Carregando comentários...