0

Teniendo varios inputs, si los quisiera chequear todos con un mismo patron ¿Cómo se podría hacer? un ejemplo

var input1 = $("#inp1");
var input2 = $("#inp2");
var input3 = $("#inp3");
var input4 = $("#inp4");
var inputX = $("#inpX");


if (input1.val().length < 1)
    alert('No puede estar vacio.')

if (input2.val().length < 1)
    alert('No puede estar vacio.')

if (input3.val().length < 1)
    alert('No puede estar vacio.')

if (input4.val().length < 1)
    alert('No puede estar vacio.')

if (inputX.val().length < 1)
    alert('No puede estar vacio.')

La única forma que veo viable esto es trabajando con clases

var allInputs = $(".classInput");

if (allInputs.val().length < 1)
    alert('No puede estar vacio.')

¿Alguien conoce alguna otra forma de agrupar todos los elementos para poder trabajar con ellos?

3
  • Usando clases es de los mejores métodos, pero claro te puedes ver con problemas si agregas otro tipo de condiciones al <input>, lo que deberías hacer es usar lo que has propuesto (usando clases) y después detectar la id del input que está vacío, sin necesidad de poner una condición en cada caso, y hacerlo todo en una misma función.
    – lromeraj
    Commented el 1 feb. 2017 a las 10:51
  • ¿Por qué no aprovechas la validación HTML5? Poniendo el atributo required a los inputs automáticamente te valida que no estén vacíos. Ésto es mucho más práctico, ha no ser que desees compatibilidad con navegadores reviejos.
    – gugadev
    Commented el 1 feb. 2017 a las 11:12
  • Ya se que se puede validar con required o el atributo pattern, pero esto es un ejercicio simplificado de lo que tengo y lo he puesto para aprender y ver distintas soluciones. Además que justamente no es validación lo que estoy haciendo.
    – Takyo
    Commented el 1 feb. 2017 a las 11:38

3 respuestas 3

2

Crea una función genérica de verificación:

var no_puede_estar_vacio = function(input)
{
    if (input.val().length < 1)
        alert('No puede estar vacio.');
};

Y verifica todos los inputs de golpe con esa función usando forEach:

[$("#inp1"), $("#inp2"), $("#inp3"), $("#inp4"), $("#inpX")].forEach(no_puede_estar_vacio);
2

Para verificar si alguno de los elementos cumple o no cierta condición, puedes utilizar Array.prototype.some.

Ejemplo

$('#btn').click(function() {

  // capturas la clase y aplicas `some` 
  var bool = $('.in').toArray().some(function(el) {
    return $(el).val().length < 1
  });

  if (bool) {
    console.log("al menos uno de los elementos esta vacio");
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="in" name="a">
<input type="text" class="in" name="b">
<input type="text" class="in" name="c">
<input type="text" class="in" name="d">
<input type="text" class="in" name="e">
<button id="btn">Tocame</button>

0

Puedes recogerlos todo en un array y aplicar una funcion de validación única para todos los campos individualmente.

Te pongo un ejemplo, junto a otro modo, donde tenemos un array con los ids de los inputs, recorremos el array, buscamos el input con ese ID y, si existe el input, recogemos el valor y llamamos a una función de validación para dicho valor.

var inputs = [];
inputs.push($("#inp1"));
inputs.push($("#inp2"));
inputs.push($("#inp3"));
inputs.push($("#inp4"));
inputs.push($("#inpX"));

//O también:
//var inputs = [$("#inp1"),$("#inp2"),$("#inp3"),$("#inp4"),$("#inpX")];

var validarInput = function(input){
  if (input.val().length < 1)
    alert('No puede estar vacio.')
}

for(i in inputs){
  if(inputs.hasOwnProperty(i)){
    input = inputs[i];
    validarInput(input);
  }
}
//////////////////////
//Otro modo que me gusta mas puede ser:
//////////////////////

var ids = ["inp1","inp2","inp3","inp4","inpX"];

var validarValue = function(val){
  if(!val || val.length <1){
    alert("No puede estar vacio"); 
  }
}


//Recorremos todos los ids
for(i in ids){
  if(ids.hasOwnProperty(i)){
    id = ids[i];
    //Por cada ID buscamos su input
    var input = $("#"+id);
    //Si no hay input, no lo podemos validar
    if(input){
      //Llamamos a la función para validar el valor
      validarValue(input.val());
    }
  }
}

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.