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

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

• javascript
• arrays

Share Improve this question Follow asked Aug 8, 2016 at 17:29 ßiansor Å. Ålmerolßiansor Å. Ålmerol 3,14933 gold badges2424 silver badges2626 bronze badges 4

• 1 Not working in the sense? what is happening? – Rajaprabhu Aravindasamy Commented Aug 8, 2016 at 17:31
• 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. – epascarello Commented Aug 8, 2016 at 17:32
• 1 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(). – Mike Cluck Commented Aug 8, 2016 at 17:42
• @MikeC thanks for that idea – ßiansor Å. Ålmerol Commented Aug 8, 2016 at 17:47

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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

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./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./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>

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.

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.