Existe-t-il un moyen de vérifier si une entrée est remplie lorsque vous la saisissez? À l'heure actuelle, mon code vérifie si l'entrée est remplie, puis affiche un div après que l'utilisateur a cliqué sur l'entrée. Je souhaite que le div s'affiche une fois que les futures méthodes de validation auront été respectées ... sans avoir à cliquer en dehors de l'entrée.

Existe-t-il également un moyen de conserver le div à afficher si l'utilisateur doit revenir en arrière et supprimer les données d'une entrée?

$(function () {   
    var _=$('input');
    
    _.change(function() {
        
        if (_.filter(function (){return $(this).val().length }).length==_.length)
        $('.next').show();
        else
            $('.next').hide();
            
    });
});
.next { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="name" type="text" />
<input id="email" type="text" />


<a class="next">show div</a>
0
Becky 8 août 2016 à 17:52

4 réponses

Meilleure réponse

L'événement onchange n'est déclenché que si vous laissez (flou) l'élément d'entrée. Pour suivre les mises à jour indépendamment de l'état de focus d'entrée, vous devez utiliser un autre type d'événement, par exemple onkeydown ou onkeypress.

$(function () {   
    var $input = $('input');

    $input.on('keypress', function() {
        if ($input.filter(function (){return $(this).val().length }).length == $input.length) {
            $('.next').show();
        }
        else {
            $('.next').hide();
        }
    });
});
1
feeela 8 août 2016 à 15:07

Cela devrait fonctionner. Je pense que l'exigence n'est pas que l'une des cases satisfasse à l'exigence.

Donc, dans mon exemple, si une touche est enfoncée dans une entrée, toutes sont ensuite vérifiées. Dès que vous répondez aux exigences, la Div est affichée.

Il utilise l'événement keyup et chaque fonctionnalité de jquery. Vous pouvez remplir l'entrée au hasard. J'ai d'abord eu le keydown, mais vous vérifieriez alors trop tôt.

// JavaScript source code
$(function () {
var _ = $('input');

_.keyup(function () {
    var allOk = true;
    _.each(function () {
        if ($(this).val() == '') {
            allOk = false;
        }
    });
    if (allOk) {
        $('.next').show();
    }
    else {
        $('.next').hide();
    }
});
});
.next { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="name" type="text" />
<input id="email" type="text" />


<a class="next">show div</a>
0
Yeronimo 8 août 2016 à 15:18

Comme indiqué par @feeela, l'événement "change" ne se déclenche qu'une fois que le focus est perdu. Le code suivant est simple et répondra à vos besoins, y compris en gardant le DIV visible même si les entrées deviennent vides, à nouveau.

Essayez plutôt ceci:

$(function () {   
  $('input').on('keypress', function() {
    if ($(this).val()) { // Gets the firing input's value
      $('.next').show();
    }
  });
});

Alternativement, vous pouvez définir des variables, mais ce code est si simple, il n'est pas vraiment nécessaire:

$(function () {   
  var $inputs = $('input');
  var $next = $('.next');
  $inputs.on('keypress', function() {
    if ($(this).val()) { // We still want to use "this" here, so we're only examining the input that fired the event; otherwise, it will only get the value of the first input in the set
      $next.show();
    }
  });
});
0
Jeremy Klukan 8 août 2016 à 15:08

L'utilisation de keyup comme écouteur d'événements devrait rendre cela réalisable. Quelque chose dans le sens de:

var _ = $('input');

_.keyUp(function(){
if (your validation rules are satisfied){
//Shows next button if validation rules are satisfied
$(this).siblings(".next").toggle();
}
else{
//Hides next button if validation rules are satisfied
$(this).siblings(".next").toggle();
}
});
0
Mike Timms 8 août 2016 à 15:02