多个输入的验证 | 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.

Answer 1

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

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

Answer 3

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

Answer 4

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

Answer 5

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