Check several inputs

Question

Check several inputs

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (0 votes)

0

Having several inputs, if you would like to check all of them with the same pattern, how could it be done? an example

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.')

The only way I see this as viable is working with classes

var allInputs = $(".classInput");

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

Does anyone know any other way to group all the elements to be able to work with them?

javascript jquery

asked by Takyo 01.02.2017 в 11:39

source

3 answers

2

To verify if any of the elements meet or not a certain condition, you can use Array.prototype.some .

Example

$('#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>

answered by 01.02.2017 в 12:11

0

You can collect everything in an array and apply a unique validation function for all fields individually.

I give you an example, next to another mode, where we have an array with the ids of the inputs, we go through the array, we look for the input with that ID and, if the input exists, we collect the value and call a function of validation for that value.

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());
    }
  }
}

answered by 01.02.2017 в 12:08

Recursivity in C Angularjs $ routeParams gives me undefined

score 2 · Accepted Answer

Create a generic verification function:

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

And check all the hit inputs with that function using forEach :

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