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

• Rajaprabhu Aravindasamy: Not working in the sense? what is happening?
• epascarello: sub_crit_arr.length > 0 You are just checking to see if the array has a length, you are not checking to see if they inputs actually have a value.
• Mike Cluck: Just so you know, that's not the correct way to fill an array. Do sub_crit_arr.push($(v).val()) instead of sub_crit_arr[k] = $(v).val().
• ßiansor Å. Ålmerol: @MikeC thanks for that idea

Answer 1

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

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

Try filtering the results first:

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

• Rajaprabhu Aravindasamy: @Rajesh textbox's values always be string, not boolean.

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.