CODEWITHSUNDEEP
javascripthtmljqueryloopsvalidation
Rick Peetr
Rick Peetr

Reputation: 23

Validation of multiple inputs | HTML - jQuery

I have this inputs generated with php loop

<input type="text" name="input1" id="input1" class="input">
<input type="text" name="input2" id="input2" class="input">
<input type="text" name="input3" id="input3" class="input">
<input type="text" name="input3" id="input4" class="input">

I have this jQuery Code to check if any input is empty

if ( $('#input1').val() !== '' && $('#input2').val() !== '' && $('#input3').val() !== '' && $('#input4').val() !== '') {
    console.log("The inputs are not empty")
}else{
    console.log("One or more inputs are empty")
}

The inputs are generated by looping so the number of inputs changes, I want some code like this to do the validation, i tried this one but it did not work

if ( $('.input').val() !== '') {
    console.log("The inputs are not empty")
}else{
    console.log("One or more inputs are empty")
}

How can I do that? Any help would be appreciated.

Upvotes: 2

Views: 81

Answers (5)

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17610

You can use loop below or use array methods like filter find etc...

var empty=false;
jQuery.each($('.input'), function( i, val ) {if($(val).val() == '') {empty=true;}});
console.log(!empty ? "The inputs are not empty" : "One or more inputs are empty")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="input1" id="input1" class="input">
<input type="text" name="input2" id="input2" class="input">
<input type="text" name="input3" id="input3" class="input">
<input type="text" name="input3" id="input4" class="input">

or check directly value in query

console.log(jQuery('.input[value=""]').length>0 ? "One or more inputs are empty" :"The inputs are not empty" )
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="input1" id="input1" value="" class="input">
<input type="text" name="input2" id="input2" value=""  class="input">
<input type="text" name="input3" id="input3" value=""  class="input">
<input type="text" name="input3" id="input4" value=""  class="input">

Upvotes: 1

Mo Shal
Mo Shal

Reputation: 1637

You can do it easily with javascript , first of all put the inputs in form like this and add required to inputs

<form id="new_inputs">
   <input type="text" name="input1" id="input1" class="input" required>
   <input type="text" name="input2" id="input2" class="input" required>
   <input type="text" name="input3" id="input3" class="input" required>
   <input type="text" name="input3" id="input4" class="input" required>
</form>

then check it with javascript like this

var ni=document.forms.new_inputs;

if(ni.checkValidity()){
  console.log("The inputs are not empty");
}
else{
  console.log("One or more inputs are empty")
}

with this way the browser notify the user that the element required and its empty

Upvotes: 1

StefanN
StefanN

Reputation: 911

Here's a plain JavaScript solution:

let isValid = false;
document.querySelectorAll('input').forEach(input => {
      if(input.value !== ''){
        isValid = true;
      }
    });
    
    console.log('is this valid?', isValid);
<input type="text" name="input1" id="input1" class="input">
<input type="text" name="input2" id="input2" class="input">
<input type="text" name="input3" id="input3" class="input">
<input type="text" name="input3" id="input4" class="input">

Upvotes: 1

Greedo
Greedo

Reputation: 3549

It is because $('.input') returns a set of element (like an array). One elegant solution is with filter:

if ( $('.input').filter(function(){ return $(this).val() !== ''}).length > 0) {
    console.log("The inputs are not empty")
}else{
    console.log("One or more inputs are empty")
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" name="input1" id="input1" class="input">
<input type="text" name="input2" id="input2" class="input">
<input type="text" name="input3" id="input3" class="input">
<input type="text" name="input3" id="input4" class="input">

Upvotes: 2

David
David

Reputation: 218877

$('.input') will return more than one, but $('.input').val() can only return one value so it's only going to return the first value. What you want is to loop over the inputs. Something like this:

// set an initial value
var notEmpty = true;

// loop over the inputs and update the value if any are empty
$('.input').each(function () {
  if ($(this).val() === '') {
    notEmpty = false;
  }
});

// check the resulting value
if (notEmpty) {
  console.log("The inputs are not empty")
} else {
  console.log("One or more inputs are empty")
}

Upvotes: 3

Related Questions