0

Chicos, como estan? tego una duda, tengo que validar un campo type text de un form, el tema es que genero un form por cada fila de una tabla que traigo por jsp. asi:

            <tbody>
                              <c:forEach items="${listaRegalosSinElegir}" var="l">

                              <form action="AltaRegalos" method="Post" onsubmit="return validar()"> <tr><td><p>${l.denominacion}</p></td><td><p>${l.denominacion}</p></td><td><p>${l.precioUnitario}</p></td><td><p><input type="number" name="Cantidad" class="CampoForm"><input type="hidden" value="<c:out default="" value="${idPareja}"></c:out>" name="IdParejaListado" ><input type="hidden" name="idRegalo" value="${l.id}"></p></td><td><input type="submit" name="AgregarRegalo" value="Agregar" class="btn btn-success btn-sm"></td></tr> </form>
                                              </c:forEach>
                            </tbody>

Debo validar que el campo input del form al cual le hago click en l submit, no este vacio, se como hacerlo cuando hay 1 solo form, pero en este caso la cantidad es grande. desde ese submit llamo al "return validar()" desde onsubmit.

Este es el script que tengo hasta ahora:

   let MensajeError= document.getElementById("MensajeError");
   let Combos= document.getElementsByClassName("selector");
   let Campos = document.getElementsByClassName("CampoForm");

   function validar(){



 for (var i in Campos) {

    if(Campos[i].value===""){
        Campos[i].style.borderColor="red";
        Campos[i].focus();
        MensajeError.innerHTML="Debe Completar todos los campos.";
        return false;

    }
    else{
        Campos[i].style.borderColor="green";

    }
}

for (var i in Combos) {
            console.log(Combos[i].value);
           if(Combos[i].value===0){
               Combos[i].style.borderColor="red";
               Combos[i].focus();
               MensajeError.innerHTML="Debe Seleccionar una opcion.";
               return false;

           }
           else{
               Combos[i].style.borderColor="green";

           }
       }

   return true;

  }

Espero se entienda. Debo hacerlo con javascript puro, se que es mejor JQUERY, pero bueno. Debe ser en Vanilla Javascript. Me ayudan?

1 respuesta 1

1

En lugar de ponerle el evento a cada <form> puedes manejar un solo evento a nivel de la tabla, este script lo agregarías al final de la página cuando ya cargaron todos los elementos, ejemplo:

var tabla = document.getElementById("tabla");

tabla.addEventListener("submit", function(e) {
  var form = e.target;

  var campos = form.querySelectorAll('.texto');
  
  for (var i = 0; i < campos.length; i++) {
    if(campos[i].value === ""){
        campos[i].style.borderColor = "red";
        campos[i].focus();
        return e.preventDefault();
    }
    else{
        campos[i].style.borderColor = "green";
    }
  }
  
  console.log('Se envió el formulario ' + form.id);
  
  // esta línea no es necesaria pero el resultado desaparecería si se envía el form aquí
  e.preventDefault(); 
});
<table id="tabla">
  <tbody>
    
    <tr>
      <td>
        <form id="f1">
          <input class="texto" />
          <input type="submit" value="Enviar" />
        </form>
      </td>
    </tr>

    <tr>
      <td>
      <form id="f2">
        <input class="texto" />
        <input class="texto" />
        <input type="submit" value="Enviar" />
      </form>
      </td>
    </tr>


    <tr>
      <td>
        <form id="f3">
          <input class="texto" />
          <input class="texto" />
          <input class="texto" />
          <input type="submit" value="Enviar" />
        </form>
      </td>
    </tr>
    
  </tbody>
</table>

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.