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?