0

Tengo un if dentro de un evento submit. Realizo una condición para indicar que si lo inputs y los select no están vacíos pues ejecute cierta función.

Como esto:

$('#formulario').submit(function (e) {
    if($("#id").val()!=="" && $("#name").val()!=="" && $("#surname").val()!=="" && $("#city").val()!=="") {

     //código 
    }
});

La cuestión es que pueden ser mas de 10 inputs y select's y escribir eso para todos esta como mal. Como puedo hacer el código mas limpio? Agradezco la colaboración.

3 respuestas 3

3

Podrías realizar la siguiente estrategia

$('#formulario').submit(function (e) {
  let selectors = [
    "#id",
    "#name",
    "#surname",
    "#city"
  ];

  for (const selector of selectors) {
    if ($(selector).val() === "") return;
  }

  // Código

});

Almacenas en un arreglo todos los selectores que tienes que analizar, los recorres en un ciclo y revisas que si la cadena es vacía no ejecutarás más código, por lo cual te saldrías de la función y no retornarás nada, en caso que todos los valores de tus selectores cumplan con el hecho de que tienen contenido, se ejecutará el código que iría luego del for.

1
  • 1
    Se ajusta a lo que busco, muchísimas gracias!
    – ZeroCool
    Commented el 4 oct. 2019 a las 6:54
0

Que te parece por medio de una clase a cada campo que quieras validar, te dejo mi ejemplo.

Espero te ayude en algo.

$('#formulario').submit(function (e) {


//buscamos los campos con clase "valida" para comparar su valor
$('#formulario .valida').each(function() {
   var element = $(this);
//validamos valor
   if (element.val() == "") {
   //tu codigo en caso de tener algun vacio
   //muestra un mensaje al usuario del campo vacio mediante su propiedad name
       alert(element.prop('name')+ ' Campo Vacio ');
       e.preventDefault();
   //retornamos false ya que se encontro un campo vacio para no continuar con las demas validaciones.
      return false; 
   }
});

//tu codigo que quieres ejecutar si no se encontraron vacios.

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form id="formulario" name="formulario" action="#" >
  <p>Nombre: <input type="text" name="nombre" class="valida" size="40"></p>
  <p>Año de nacimiento: <input type="number" name="FechaNacimiento"  class="valida" min="1"></p>
  <p>Lista
   <select id="select1" name="lista" class="valida" >
   <option value="" selected></option>
   <option value="1" >valor 1</option>
   <option value="2" >valor 2</option>
   </select>
   
  </p>
  <p>
    <input type="submit" value="Enviar">
   
  </p>
</form>

0

Puedes hacerlo con un each dentro de tu submit que recorra los inputs a ser validados que contengan class="classValid"

Ejemplo:

$('#formulario').submit(function (e) {
    $(this).find(".classValid").each(function(i){//recoorre todos los inputs del formulario con class=classValid
        if($(this).val().length <= 0)
            return false;
    });
    //tu codigo
});

si se quiere recorrer solo algunos tipos de inputs

find('input[input:text, input:radio, select]')

o todos los input existentes dentro del formulario incluye button

find(':input')//

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.