1

Estoy intentando recorrer un formulario haciendo un bucle for:

<form name="altaEmpleados" id="altaEmpleados" action="#" method="POST" enctype="multipart/form-data">

        <div class="contenedor-campos">

            <div class="campo-alta-empleados">
                <label for="idEmpleado">ID Empleado:</label>
                <input type="text" name="idEmpleado" id="idEmpleado">
            </div>

            <div class="campo-alta-empleados">
                <label for="password">Contraseña:</label>
                <input type="password" name="password" id="password">
            </div>

            <div class="campo-alta-empleados">
                <label for="nombre">Nombre:</label>
                <input type="text" name="nombre" id="nombre">
            </div>

            <div class="campo-alta-empleados">
                <label for="apellidos">Apellidos:</label>
                <input type="text" name="apellidos" id="apellidos">
            </div>

            <div class="campo-alta-empleados">
                <label for="email">Email:</label>
                <input type="email" name="email" id="email">
            </div>

        <div class="campo-alta-alta-empleados">
            <label for="foto">Foto:</label>
            <input type="file" name="foto" id="foto">
        </div>

        </div>

        <div class="enviar-alta-empleados">
            <input type="hidden" id="accion" value="crearEmpleado">
            <input type="submit" name="botonAltaEmpleado" class="boton" value="Registrar">
        </div>
    </form>

El bucle que hago es el siguiente:

for (let i = 0; i< #altaEmpleados.length(); i++ {

if ($input[type]!=file && $input.val() == "") {
alert("Debe rellenar todos los campos");
$(input).focus();
}

}

Lo que pretendo es recorrer todos los campos que no sean type file (la foto no es obligatoria), y que los que encuentre vacíos, me los señale con la función focus() de jQuery y me salte un alert avisándo de que hay que rellenarlos todos. El planteamiento creo que lo tengo bien pero el problema está en la sintaxis. ¡Ayuda por favor!

1 respuesta 1

1

Me parece que no necesitas de JQuery para dicha actividad.....

Si nos fijamos en la documentación de Mozilla Developer1.

Tenemos a nuestra disposición un método llamado: querySelectorAll que nos devuelve un listado con todos los nodos que empatan con una lista separada por comas de identificadores a buscar o filtrar.

En este caso mencionas que el único input no obligatorio es el de tipo file por lo que perfectamente podemos usar el método antes mencionado para encontrar todos aquellos por su selector de atributo, quedando asi:

document.querySelectorAll('input[type="text"], input[type=email]')

Lo anterior es iterable por lo tanto con un ciclo forEach podemos ir recorriendo cada uno de los valores devueltos, que en este caso serían los inputs y verificar su propiedad value; para que de este modo si dicha propiedad esta vacía actuemos en concencuencia y no entonces hagamos otra acción.

Como dentro de la selección anterior no aparece la búsqueda de los input de tipo file, entonces quedan descartados y por lo tanto el proceso de validación posterior no los afectará

elementos.forEach((elemento) => {
        (elemento.value === "") ? elemento.style.background = "red" : aviso.innerHTML = "Campos llenados"
      })

Ejemplo completo

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejemplo</title>
    </head>
    <body>
    <form action="#">
      <input type="text" /><br><br>
      <input type="email" /><br><br>
      <input type="file"><br><br>
      <button id="registro">Registrame</button>
    </form>
    <span id="aviso"></span>
    <script>
        let elementos = document.querySelectorAll("input[type=text], input[type=email]")
        let boton = document.getElementById("registro")
        let aviso = document.getElementById("aviso")
        
        boton.addEventListener("click", (event) => {
          event.preventDefault()
          elementos.forEach((elemento) => {
            (elemento.value === "") ? elemento.style.background = "red" : aviso.innerHTML = "Campos llenados"
          })
        })
       
    </script>
    </body>
    </html>

Referencias

4
  • Funciona perfectamente. muchas gracias!! El problema es que quiero saber hacerlo con jQuery. He hecho esto, pero solo me señala el primero que encuentra vacío... Commented el 27 dic. 2019 a las 13:01
  • function validaForm() { var inputs = $(".contenedor-campos input"); for (var i = 0; i < inputs.length - 1; i++) { if ($(inputs[i]).val() == '') { alert("Rellena todos los campos"); }) inputs[i].style.border = '1px solid red'; return false; } } return true; } Commented el 27 dic. 2019 a las 13:02
  • Otro problema es que metiendo tabulador, lo valida como si hubiese escrito algo, por lo que podrían colar perfectamente espacios en blanco. ¿Alguien sabe como solucionar eso? Commented el 27 dic. 2019 a las 13:07
  • Usa trim y con eso lo quitas
    – user128299
    Commented el 27 dic. 2019 a las 14:26

Tu Respuesta

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

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