Javascript: How to properly check if array is empty

Question

I am trying to validate my array input fields if its empty, unfortunately my code seems not working i don't know why, and what is the best way to validate this.

<input type="text" name="sub_crit_text[]" class="sub_crit_text" value="text1">
<input type="text" name="sub_crit_text[]" class="sub_crit_text" value="text2">
<input type="text" name="sub_crit_text[]" class="sub_crit_text" value="text3">
<input type="text" name="sub_crit_text[]" class="sub_crit_text" value="text4">

My js

var sub_crit_arr = [];
$('.sub_crit_text').each(function(k , v){
    sub_crit_arr[k] = $(v).val();
});

if(sub_crit_arr.length > 0){

}else{
    alert('Sub criteria cannot be empty');
    return false;
}

Answer 1

An array of empty strings will give you a length greater than 0:

var sub_crit_arr = ['','','','']

Try filter ing the results first:

sub_crit_arr.filter(function(element){
  return element // empty string is falsy
}).length

Answer 2

Array.filter will give you element and not boolean value. If you just want to just validate and do not have use for invalid entries, you can use array.some or array.every

Array.every

 $("#btnValidate").on("click", function(){ var valid = [].every.call($(".sub_crit_text"), function(el){ return el.value.trim().length > 0 }); console.log(valid) })

 sub_crit_text

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <input type="text" name="sub_crit_text[]" class="sub_crit_text" value="text1"> <input type="text" name="sub_crit_text[]" class="sub_crit_text" value="text2"> <input type="text" name="sub_crit_text[]" class="sub_crit_text" value="text3"> <input type="text" name="sub_crit_text[]" class="sub_crit_text" value="text4"> <button id="btnValidate">Validate</button>

Array.some

 $("#btnValidate").on("click", function(){ var inValid = [].some.call($(".sub_crit_text"), function(el){ return el.value.trim().length === 0 }); console.log(inValid); })

 sub_crit_text

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <input type="text" name="sub_crit_text[]" class="sub_crit_text" value="text1"> <input type="text" name="sub_crit_text[]" class="sub_crit_text" value="text2"> <input type="text" name="sub_crit_text[]" class="sub_crit_text" value="text3"> <input type="text" name="sub_crit_text[]" class="sub_crit_text" value="text4"> <button id="btnValidate">Validate</button>

Answer 3

IF you simply want to check if one of the input is empty :

JS

var valid = false ;

$('.sub_crit_text').each(function(k , v){
  if ( $(v).val() ) valid = true ;
});

if (!valid)
  alert("Sub criteria cannot be empty");

Be aware that all the input has value at first. So maybe it is the reason your code not work.

Answer 4

You can do it with filter alone,

if($('.sub_crit_text').filter(function(){ return !this.value.trim(); }).length){
    alert('Sub criteria cannot be empty');
    return false;
}

There is no need to introduce another one array and also you can cut down one more iteration.