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... 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; } 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? el 27 dic. 2019 a las 13:07
  • Usa trim y con eso lo quitas
    – BetaM
    el 27 dic. 2019 a las 14:26

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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