J'ai deux éléments avec le même nom de classe et je fais $ (". text-input") pour les sélectionner tous. Dans le rappel d'entrée,
$(".text-input").on("input", function (event) {
console.log(is any of those not empty?);
})
dans l'un de ces éléments, je veux savoir si au moins une des zones de saisie n'est pas vide. Comment faire cela?
4 Réponses :
Vous pouvez simplement vérifier si la longueur de la valeur de chaque entrée est égale à 0. Si c'est le cas, faites ce que vous voulez. Voici le code.
$(".text-input").on("input", function (event) {
if($(this).val().length == 0){
console.log("is any of those not empty?");
}
});
Mais cela ne vérifiera que l'entrée qui est actuellement saisie. Ce que vous faites est essentiellement de vérifier si vous avez supprimé tout le contenu de cette entrée.
Je ne peux pas voir comment cela résout même à distance le problème des OP " au moins une des zones de saisie n'est pas vide " comme si celle en cours de saisie n'était pas vide mais l'autre est vide (selon l'exigence) cela n'atteindra pas la console.log
Vous pouvez vérifier le contenu de tous les éléments text-input avec la méthode each () . Avec not (this) , vous pouvez exclure les données actuellement saisies dans la zone de texte.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="text-input" /> <input type="text" class="text-input" /> <input type="text" class="text-input" />
$('.text-input').on('input change', function() {
// check all elements with the 'text-input class', but exclude the one currrently typed into
$('.text-input').not(this).each(function(){
// if there is content in one of the others, then display a message in console
if($(this).val().trim().length > 0) {
// one of the inputs already has something in it
console.log('Something is filled in another box');
}
});
});
En fait, vous devriez toujours .trim () le contenu avant le test.
Vous ne voulez pas que les espaces blancs tiennent compte d'une valeur d'entrée valide:
<input type="text" class="text-input" name="a"><br> <input type="text" class="text-input" name="b" value="foo"><br> <input type="text" class="text-input" name="c"><br> <button id="test" type="button">TEST one has value</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
/* bool helpers */
.is-empty {
outline: 2px solid red;
outline-offset: -2px;
}
const $inp = $(".text-input");
const validateEmpty = () => {
$inp.each((i, el) => {
const is_empty = !el.value.trim();
if (is_empty) console.log(`field ${el.name} is empty`);
el.classList.toggle("is-empty", is_empty);
});
};
// Return true if at least one input has value
const atLeastOneNotEmpty = (ELs) => [...ELs].some(el => el.value.trim());
$inp.on('input', validateEmpty);
$("#test").on("click", () => {
console.log(atLeastOneNotEmpty(jQuery.makeArray($inp)))
});
Pour répondre à votre deuxième question:
"Je veux savoir si au moins une des zones de saisie n'est pas vide . Comment faire?"
// Return true if at least one input has value
const atLeastOneNotEmpty = (elements) => {
return [...elements].some(el => el.value.trim());
}
Exemple de code
<input type="text" class="text-input"> <input type="text" class="text-input"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
/* bool helpers */
.is-empty {
outline: 2px solid red;
outline-offset: -2px;
}
$(".text-input").on("input", function() {
const is_empty = !this.value.trim();
if (is_empty) console.log("field is empty");
$(this).toggleClass("is-empty", is_empty);
});
"[...] Je veux savoir si au moins une des boîtes de saisie n'est pas vide." C'est la même chose que la réponse de Francesco Vallone - en ce qu'elle ne résout pas le problème des OP.
@Lapskaus J'ajoutais plus à cette réponse
Juste un avertissement que certains est un abus de langage car cela signifie en fait n'importe quel - "certains" signifieraient "> 1" mais c'est "> = 1" - 1 n'est jamais " quelques". (pas lié à la réponse juste exprimant).
Vous avez mal compris mon commentaire .some () est la bonne chose à utiliser ici - "certains" est mal nommé dans javascript
@ Freedomn-m désolé pour le bruit, je veux juste savoir comment préféreriez-vous que cette méthode soit nommée? un ? atLeastOne ? hasOne ? ... semble certains est un bon choix, non?
Une façon est d'utiliser filter () pour créer une collection de ceux qui ont des valeurs, puis comparer la longueur de cette collection à la longueur de toutes les entrées
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="text-input" /> <input type="text" class="text-input" /> <input type="text" class="text-input" />
const $inputs = $('.text-input').on('input', function() {
const $filled = $inputs.filter((_, el) => !!el.value.trim());
console.clear();
if ( $filled.length < $inputs.length ) {
console.log('At least one is empty')
} else {
console.log('No empties')
}
});
Au moins un. Par conséquent, .some () serait préférable pour une grande collection et ses avantages de retour anticipé. ici - Quittez si tôt avec un Boolean au lieu de créer de grandes collections d'éléments filtrés en mémoire .
@ RokoC.Buljan Quelques entrées de formulaire ne constituent guère une grande collection