Validation of multiple inputs | HTML - jQuery

Question

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.

David · Accepted Answer · 2020-07-15 14:50:28Z

3

$('.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")
}

answered Jul 15, 2020 at 14:50

David

221k42 gold badges245 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Greedo · Accepted Answer · 2020-07-15 14:52:25Z

2

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

answered Jul 15, 2020 at 14:52

Greedo

3,5481 gold badge15 silver badges30 bronze badges

Comments

StefanN · Accepted Answer · 2020-07-15 14:56:07Z

1

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

answered Jul 15, 2020 at 14:56

StefanN

9217 silver badges19 bronze badges

Comments

Mo Shal · Accepted Answer · 2020-07-15 15:03:21Z

1

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

edited Jul 15, 2020 at 15:03

answered Jul 15, 2020 at 14:56

Mo Shal

1,63721 silver badges27 bronze badges

Comments

Cagri Tacyildiz · Accepted Answer · 2020-07-15 15:13:50Z

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

Collectives™ on Stack Overflow

Validation of multiple inputs | HTML - jQuery

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related