Detect input of a form when the button is clicked

Question

Detect input of a form when the button is clicked

Navigation

#1 by (1 votes)

0

Guys, how are you? I have a doubt, I have to validate a field type text of a form, the issue is that I generate a form for each row of a table that I bring by jsp. so:

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

I must validate that the input field of the form to which I click on l submit, is not empty, I know how to do it when there is only 1 form, but in this case the quantity is large. from that submit I call "return validate ()" from onsubmit.

This is the script that I have so far:

   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;

  }

I hope you understand. I have to do it with pure javascript, I know that JQUERY is better, but good. It must be in Vanilla Javascript. You help me?

javascript html5 jsp webforms

asked by GALS 14.11.2018 в 18:11

source

1 answer

Is there a transaction log in Laravel? Display a random word, from a JSON object stored in MongoDB, every 5 seconds

score 1 · Answer 1

Instead of putting the event to each <form> you can handle a single event at the table level, this script would add it to the end of the page when they already loaded all the elements, example:

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>