Ir para conteúdo

Recommended Posts

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



 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por nosredna
      Olá amigos,
       
      tenho o seguinte código:
      <html> <script type="text/javascript"> function Soma(){ var soma = 0; var ipts = document.querySelectorAll('input[oninput="Soma()"]'); for(var x=0; x<ipts.length; x++){ var valorItem = parseFloat(ipts[x].value); !isNaN(valorItem) ? soma += parseFloat(valorItem) : null; } document.querySelector('#final').value = soma.toFixed(2); } </script> <form action=""> Total produto1: <input type="text" oninput="Soma()" value="0"><br> Total produto2: <input type="text" oninput="Soma()" value="0"><br> <br> Total todos os produtos12: <input type="text" id="final"> </form> </html> Bom...para essas duas inputs funciona corretamente.
      Porém, se eu quiser colocar mais inputs como: Total produto3 + Total produto4 = Total todos os produtos34, Total produtoX + Total produtoY = Total todos os produtosXY, ...
      e usar o mesmo código JS, é possível? alguém poderia me dar uma dica de como eu faço para fazer isso? já tentei de várias maneiras, mas não estou tendo sucesso...
       
      Fico agradecido. 
    • Por 4ly
      Olá. Bom basicamente eu tenho um botão âncora que leva até a aba de sobre do meu site, só que ele não tem animação, ele simplesmente "teleporta" para essa aba do nada isso não é legal. 
      Gostaria de saber algum código de JavaScript ou CSS para solucionar isso 
      Esse é o código : 
       
      <button id="explorer"><a href="#about">Explorar</a></button>
    • Por jgasper
      Boa tarde, preciso de ajuda, fiz o site para minha empresa de advocacia mas nao sei transformar em mobile, peguei template pronto e fiz modificações, nao sou bom em HTML, foi o que consegui fazer. Alguem pode me ajudar a transformar ele em responsivo? só fazendo o menu funcionar para celular?
       
      Os arquivos do site estao em: https://mega.nz/#!AEAUxa5Z!EwFVVhgaJeJg6DTFpzUfi0vnrULPzI8YI9I0-XJwaE8
       
      Agradeço desde ja.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.