1

Aun soy principiante.Estoy validando un form y quiero que los errores que el usuario cometa, se muestren en una lista generada por un for. El problema surge en la parte del for, por que cuando le hago console.log, se ve que me muestra 17 veces el mismo error generado, ademas de que cuando apreto enviar otra vez, recorre de nuevo sus 17 veces. Gracias

<!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>
1
  • El problema es que tu for está basado en el tamaño de la variable errores, que no es otra cosa que una cadena de 17 caracteres (errores = "Ingrese su nombre";), por eso ves el mensaje 17 veces al hacer for(let i = 0; i < errores.length; i++){... . Dado que no he entendido bien lo que quieres hacer, no puedo sugerirte una solución. Si se trata de mostrar el error cada vez, no sé por qué quieres usar un for
    – A. Cedano
    el 11 nov. 2018 a las 22:03

1 respuesta 1

1

El loop se repite 17 veces porque el valor de la variable errores no es un array sino una cadena (Ingrese su nombre) la cual tiene 17 caracteres.

En lugar de poner errores = "Ingrese su nombre"; deberias poner:

errores.push("Ingrese su nombre");

Tu script sería así (con unos cuantos arreglos para lo que necesitas):

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.