1
I am working on a form for some time, after validating it I found an error because I can not submit to change page,Besides that after the concert of all errors in the validation the password error usually remains. Also wanted a hint on how I could save validation to a Local Storage.
// pega o botão...e o input
var botao = document.querySelector(".botao_cadastro");
botao.addEventListener("click", function (){
event.preventDefault();
var form = document.querySelector("#cadastro_todo")
var user = takeUser(form)
var erros = vrUser(user);
if (erros.length){
errorMessage(erros)
vrUser.innerHTML = "";
return;
}
});
// pega usuário do formulario
function takeUser(form){
var user = {
FirstName : form.FirstName.value,
LastName : form.LastName.value,
Email : form.Email.value,
Password : form.Password.value,
Cpassword : form.Cpassword.value,
}
return user;
}
//exibe a messagem de erro
function errorMessage(erros){
var ul = document.querySelector("#mensagem_erro")
ul.innerHTML = "";
erros.forEach(function(erros) {
var li = document.createElement("li");
li.innerHTML = "";
li.textContent = erros;
ul.appendChild(li)
});
}
// verifica o usuario e mostra o erro
function vrUser(user){
var erros =[]
if(user.FirstName.length == 0)erros.push("o nome não pode ser em branco");
if(user.LastName.length == 0)erros.push("O sobrenome não pode ser em branco");
if(user.Email.length == 0)erros.push("o email não pode ser em branco");
if(user.Email.indexOf("@") == -1 )erros.push("o email está inválido");
if(user.Password.length == 0)erros.push("a senha não pode ser em branco");
if(user.Cpassword.length == 0)erros.push(" A confirmação da senha não pode estar em branco");
if(user.Password.length <= 5)erros.push(" a senha pode possuir no minimo 5 caracteres");
if(user.Password != user.Cpassword)erros.push(" as senhas não coicidem");
return erros;
}
<!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">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/cadastro_todo.css">
<link rel="stylesheet" href="css/normalize.css">
<title>Sistema de Cadastro</title>
</head>
<body>
<div id = "system" >
<h1>Sign Up</h1>
<form name="form" id="cadastro_todo" action="fomr2.html" >
<span>Primeiro Nome:</span> <input class = "cadastro_input" type="text" name="FirstName"></p>
<span> Sobrenome: </span> <input class = "cadastro_input" type="text" name="LastName"></p>
<span> Email: </span> <input class = "cadastro_input" type="text" name="Email" > </p>
<span>Senha: </span> <input class = "cadastro_input" type="password" name = "Password"></p>
<span>Confirme a Senha</span> <input class="cadastro_input" type="password" name = "Cpassword" ></p>
<p><input type = "button" value="Confirmar" class="botao_cadastro" > </p>
</form>
<ul id = "mensagem_erro" ></ul>
</div>
<script src="js/errorreport.js" ></script>
<script src="js/report.js" ></script>
</body>
</html>