View Form Errors

Asked

Viewed 31 times

0

I am working on a form and I want the user errors, to be shown on screen,in the format of elements of a list I declared in my HTML, I have tried several methods and apparently this is the most reliable,e can not display the errors, in the console. Follow my code below...

 
 // pega o botão...e o input 
 
 var input  =  document.querySelectorAll(".cadastro_input");
 var botao  = document.querySelector(".botao_cadastro");
 botao.addEventListener("click", function(){
    event.preventDefault(); 
    
    var form = document.getElementsByName("#cadastro_todo");
    var user   = takeUser(form) 
    
    var errocp  = vrUser(user);
    
    if (errocp.lenght){
        errorMessage(errocp)
        return;
    }
});  

// pega usuário do formulario
function takeUser(){
    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(){
    var ul = document.getElementById("mensagem_erro")
    ul.innerHTML = "";
    erros.forEach(function(erro) {
        var li =  document.createElement("li");
        li.innerHTML = "";
        li.textContent = erro;
        ul.appendChild(li)
    });
}

// verifica o  usuario e mostra o erro
function  vrUser(user){
    var  erros  =[]
    if(user.lenght ==0)erros.push("o nome não pode ser em branco");
    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_input.css">
    <link rel="stylesheet" href="css/cadastro_etiqueta.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" onsubmit="return validacao()" >
            <p class="cadastro_etiqueta" > First name:<input class = "cadastro_input" type="text" name="FirstName"></p>
            <p class="cadastro_etiqueta" > Last name: <input  class = "cadastro_input" type="text" name="LastName"></p>
            <p class="cadastro_etiqueta" > Email:     <input  class = "cadastro_input" type="text"  name="Email" > </p>
            <p class="cadastro_etiqueta" > Password:  <input  class = "cadastro_input" type="password" name = "Password"></p>
            <p class="cadastro_etiqueta" > Confirm Password:<input  class="cadastro_input" type="password" name =  "Cpassword" ></p>
            <p><input type= "submit" class="botao_cadastro"  onsubmit=  "return report()" >  </p>
              <ul id = "mensagem_erro" ></ul>
        </form>
    </div>



    
    <script src="js/errorreport.js" ></script>    
    <script src="js/report.js" ></script>
</body>
</html>

form

  • Has two syntax errors: lenght is incorrect. Right is right length (the h at the end). Another thing is that if: if(user.length ==0)... user is an object and not an array, so you cannot count an object with .length, will always give undefined.

  • I made some updates and now it’s working thanks

No answers

Browser other questions tagged form

You are not signed in. Login or sign up in order to post.