J'essaie de valider les champs d'entrée de mon tableau s'il est vide, malheureusement mon code semble ne pas fonctionner, je ne sais pas pourquoi, et quelle est la meilleure façon de valider cela.

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

Mon 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;
}
3
ßiansor Å. Ålmerol 8 août 2016 à 20:29

4 réponses

Meilleure réponse

Vous pouvez le faire avec filter seul,

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

Il n'est pas nécessaire d'introduire un autre tableau et vous pouvez également réduire une itération supplémentaire.

-1
Rajaprabhu Aravindasamy 8 août 2016 à 17:35

SI vous voulez simplement vérifier si l'une des entrées est vide:

JS

var valid = false ;

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

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

Sachez que toutes les entrées ont de la valeur au début. C'est peut-être la raison pour laquelle votre code ne fonctionne pas.

0
Radian Jheng 8 août 2016 à 17:39

Array.filter vous donnera un élément et non une valeur booléenne. Si vous souhaitez simplement valider et ne pas utiliser les entrées non valides, vous pouvez utiliser array.some ou 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>
1
Rajesh 8 août 2016 à 18:11

Un tableau de chaînes vides vous donnera une longueur supérieure à 0:

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

Essayez d'abord filter les résultats:

sub_crit_arr.filter(function(element){
  return element // empty string is falsy
}).length
2
jessh 8 août 2016 à 17:31