It traverses array 17 times although there is only 1 value - Javascript

Question

It traverses array 17 times although there is only 1 value - Javascript

Navigation

#1 by (1 votes)

1

I am still a beginner. I am validating a form and I want the errors that the user makes to be shown in a list generated by a for . The problem arises in the for part, because when I do console.log, you see that it shows me 17 times the same error generated, besides that when I press send again, it retraces its 17 times . Thanks

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .error{
            border: 2px solid red;
        }
        .success{
            border: 2px solid green;
        }
    </style>
</head>
<body>
        <form action="">
            <div><input type="text" id="name" placeholder="Tu nombre"  ></div>
            <div><input type="text" id="edad" placeholder="Tu edad"   ></div>
            <div><input type="number" id="numero" placeholder="Tu numero"></div>
            <div><input type="email" id="email" placeholder="Tu email" ></div>
            <div><input type="submit" value="Enviar"></div>
        </form>
        <ul class="errores"></ul>
</body>
<script>
    $("form").submit(finalValidation)
    let errores = [];
    function ValidateName(){
        let nameValue = $("#name").val()
        if(nameValue == ""){
            errores = "Ingrese su nombre";
            return false
        }
        return true
    }
    function finalValidation(e){
        if(ValidateName()){
            alert("Form enviado!")
        } else{
            let ul = document.createElement("ul")
            for(let i = 0; i < errores.length; i++){
                let li = document.querySelector("li")
                console.log(li)
            }

            e.preventDefault()
        }
    }
</script>
</html>

javascript

asked by Eric 11.11.2018 в 22:32

source

1 answer

Publish Django in Apache [closed] how can I optimize this algorithm? [closed]

score 1 · Accepted Answer

The loop is repeated 17 times because el valor de la variable errores is not a array but a string ( Ingrese su nombre ) which has 17 characters.

Instead of putting errores = "Ingrese su nombre"; you should put:

errors.push ("Enter your name");

Your script would be like this (with a few fixes for what you need):

<script>
  $("form").submit(finalValidation)
  let errores = [];
  function ValidateName(){
      let nameValue = $("#name").val()
      if(nameValue == ""){
          errores.push("Ingrese su nombre"); // agregar el valor al array de errores
          return false
      }
      return true
  }
  function finalValidation(e){
      errores = []
      if(ValidateName()){
          alert("Form enviado!")
      } else{
          let ul = document.createElement("ul") // lista temporal
          for(let i = 0; i < errores.length; i++){
              let li = document.createElement("li")
              li.innerText = errores[i];
              ul.appendChild(li)
          }

          // copiar contenido de la lista temporal a tu lista de errores
          document.querySelector('.errores').innerHTML = ul.innerHTML

          e.preventDefault()
      }
  }
</script>