Vérifiez si les mots de passe sont égaux jQuery

J'essaie de savoir si deux mots de passe saisis sont identiques ou non. Mais je n'arrive pas à le faire fonctionner. Peu importe les valeurs que j'entre dans mes champs de saisie, le résultat est toujours "vrai". Pouvez-vous voir ce que je fais mal?Vérifiez si les mots de passe sont égaux jQuery

HTML:

<div class="form-group" id="password"> 
<input type="password" class="form-control" placeholder="Password" name="password"> 
</div> 
<div class="form-group" id="repassword"> 
<input type="password" class="form-control" placeholder="Confirm Password" name="repassword"> 
</div>

jQuery:

//Check if password is set 
    $('input[name=password]').blur(function() { 
     if($(this).val().length == 0){ 
      $('#password').addClass('has-error'); 
     } else { 
      $('#password').addClass('has-success'); 
     } 
    }); 
    //Check if repassword is set 
    $('input[name=repassword]').blur(function() { 
     if($(this).val().length == 0){ 
      $('#repassword').addClass('has-error'); 
     } else { 
      $('#repassword').addClass('has-success'); 
     } 
    }); 
    //Check if password and repassword are equal 
    $('input[name=password]').blur(function() { 
     if ($(this).attr('value') !== $('input[name=repassword]').attr('value')) { 
      $('#password').addClass('has-error'); 
      $('#repassword').addClass('has-error'); 
     } else { 
      $('#password').addClass('has-success'); 
      $('#repassword').addClass('has-success'); 
     } 
    });

Source

2014-07-08 madsobel

Y at-il une raison pour laquelle les actions sont liées séparément? – circusdei

Vous utilisez 'val()' pour que vous sachiez qu'il existe, mais pour une raison quelconque, vous avez soudainement décidé d'utiliser 'attr ('value')', pourquoi? – adeneo

Dites-moi s'il vous plaît que vous avez également un code de serveur en place qui vérifie également. Faire quelque chose avec les mots de passe côté client est effrayant. – asawyer

Vous devez utiliser .val() pour obtenir la valeur de la zone de texte

Vous pouvez simplifier la chose à ceci:

$('input').blur(function() { 
    var pass = $('input[name=password]').val(); 
    var repass = $('input[name=repassword]').val(); 
    if(($('input[name=password]').val().length == 0) || ($('input[name=repassword]').val().length == 0)){ 
     $('#password').addClass('has-error'); 
    } 
    else if (pass != repass) { 
     $('#password').addClass('has-error'); 
     $('#repassword').addClass('has-error'); 
    } 
    else { 
     $('#password').removeClass().addClass('has-success'); 
     $('#repassword').removeClass().addClass('has-success'); 
    } 
});

DEMO

Vous pouvez utiliser $('input').blur(function() à la place, de cette façon il déclenche sur toutes les entrées

Source

2014-07-08 20:56:05 imbondbaby

Merci beaucoup. C'était une erreur involontaire de ne pas spécifier le tout dans une seule fois. – madsobel

Utilisez domElem.value ou $(domElem).val() pour obtenir la valeur d'un élément form:

WORKING JSFIDDLE DEMO

$('input').on('input',function() { 
    var pass = $('input[name=password]'), 
     reps = $('input[name=repassword]'), 
     pass_cont = $('#password'), 
     reps_cont = $('#repassword'); 
    !$(this).is('[name=password]') || $(function() { 
     pass_cont.addClass(pass.val().length === 0 ? 'has-error' : 'has-success') 
     .removeClass(pass.val().length === 0 ? 'has-success' : 'has-error'); 
    })(); 
    !$(this).is('[name=repassword]') || $(function() { 
     reps_cont.addClass(reps.val() === pass.val() ? 'has-success' : 'has-error') 
     .removeClass(reps.val() === pass.val() ? 'has-error' : 'has-success'); 
    })(); 
});

Source

2014-07-08 20:53:25 PeterKA

+1 Voici comment vous devriez le faire. – Darren

@Darren, merci.Je garderai ça à l'esprit. :) – PeterKA

Il devrait être $(this).val(), et non $(this).attr('value'). Et vérifier les deux champs lorsque l'est floue:

$('input').blur(function() { 
    if ($('input[name=password]').val() != $('input[name=repassword]').val()) { 
     $('#password').removeClass().addClass('has-error'); 
     $('#repassword').removeClass().addClass('has-error'); 
    } else { 
     $('#password').removeClass().addClass('has-success'); 
     $('#repassword').removeClass().addClass('has-success'); 
    } 
});

jsFiddle example

Source

2014-07-08 20:53:26 j08691

Vous n'êtes jamais enlever l'une des classes, vous devez les enlever pour le faire fonctionner, sinon la spécificité de CSS ne montrer les styles pour la classe la plus spécifique

tout pourrait être écrit beaucoup plus simple

$('input[name=password], input[name=repassword]').on('change', function() { 
    var password = $('input[name=password]'), 
     repassword = $('input[name=repassword]'), 
     both  = password.add(repassword).removeClass('has-success has-error'); 

    password.addClass(
     password.val().length > 0 ? 'has-success' : 'has-error' 
    ); 
    repassword.addClass(
     password.val().length > 0 ? 'has-success' : 'has-error' 
    ); 

    if (password.val() != repassword.val()) { 
     both.addClass('has-error'); 
    } 
});

FIDDLE

Source

2014-07-08 20:59:33 adeneo

wow, je ne savais pas que vous pouviez utiliser 'removeClass' pour supprimer deux classes - vous ne vous attendriez pas à ce nom. bonne réponse lisible. (bien que l'essence de l'erreur de l'OP était la non utilisation de 'val()') – shanet

En plus de ce que les autres ont dit au sujet de l'utilisation val() pour obtenir la valeur de l'élément au lieu de attr('val') (qui pourrait être dérivé du HTML), l'exemple aussi ne fonctionne pas parce que:

Vous devez supprimer la classe has-error et has-success avant d'ajouter l'un ou l'autre
Vous vérifiez la valeur du deuxième champ de mot de passe onblur du premier. Il semble que vous devriez comparer les deux dans un gestionnaire d'événement comme dans la réponse d'adeneo.

Source

2014-07-08 21:03:48 shanet

Vérifiez si les mots de passe sont égaux jQuery

Répondre

Questions connexes