jquery comparer 2 champs password

utilisateur
Javascript

Bonjour à toutes et à tous,

Je dois faire quelque chose de banal, utiliser jquery pour comparer deux mots de passe (si les mots de passe sont égaux, le formulaire est envoyé)
Voici la condition :

if (!$("#pwd").val() === ("#pwd2").val())

ce sont deux champs type password, mais le formulaire est envoyé même s'il sont différents ????

Merci pour votre aide

au cas où je poste le formulaire complet

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
      <title>Exemple</title>
<link rel="stylesheet" type="text/css" href="css.css" />
    <script src="jquery.js"></script>
    <script type="text/javascript">
$(function(){
    $("#upload1").click(function(){
        valid = true;

                if ($("#nom").val() ==""){
                    $(".error-message-nom").show();
                    $(".error-message-avant-envois").show();                
                    valid = false;
                }else if(!$("#nom").val().match(/^[a-z]+$/i) && $("#nom").val() !=""){
                    $(".error-message-nom-valide").show();
                    $(".error-message-avant-envois").show();                
                    valid = false;                  
                }else{
                    $(".error-message-nom").hide();
                }

                if ($("#adresse").val() ==""){
                    $(".error-message-adresse").show();
                    $(".error-message-avant-envois").show();                    
                    valid = false;
                }else{
                    $(".error-message-adresse").hide();
                }

                if ($("#email").val() ==""){
                    $(".error-message-email").show();
                    $(".error-message-avant-envois").show();                
                    valid = false;
                }else if(!$("#email").val().match(/^[^\W][a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\@[a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\.[a-zA-Z]{2,4}$/) && $("#email").val() !=""){
                    $(".error-message-email-valide").show();
                    $(".error-message-avant-envois").show();                
                    valid = false;                  
                }else{
                    $(".error-message-email").hide();
                }

                if ($("#cp1").val() =="" || $("#cp2").val() =="" || $("#cp3").val() ==""){
                    $(".error-message-cp1").show();
                    $(".error-message-avant-envois").show();                
                    valid = false;
                }else if(!$("#cp1").val().match(/^[0-9]{3}$/) && $("#cp1").val() !="" || !$("#cp2").val().match(/^[0-9]{3}$/) && $("#cp2").val() !="" || !$("#cp3").val().match(/^[0-9]{4}$/) && $("#cp3").val() !=""){
                    $(".error-message-cp1-valide").show();
                    $(".error-message-avant-envois").show();                
                    valid = false;                  
                }else{
                    $(".error-message-cp1").hide();
                }
///^(http|https):\/\/([\w]*)\.([\w]*)\.(com|net|org|biz|info|mobi|us|ca|bz|name|co|quebec|fr)(\.[a-z]{1,3})?\z/i
                if (!$("#url").val().match(/https?:\/\/(?:www\.|(?!www))[^\s\.]+\.[^\s]{2,}|www\.[^\s]+\.[^\s]{2,}/) && $("#url").val() !=""){
                    $(".error-message-url-valide").show();
                    $(".error-message-avant-envois").show();                
                    valid = false;                  
                }else{
                    $(".error-message-url").hide();
                }               

                if ($("#pwd").val() ==""){
                    $(".error-message-mdp-valide").show();
                    $(".error-message-avant-envois").show();                
                    valid = false;
                }else{
                    $(".error-message-mdp-valide").hide();
                }   

                if ($("#pwd2").val() ==""){
                    $(".error-message-mdp2-valide").show();
                    $(".error-message-avant-envois").show();                
                    valid = false;
                }else{
                    $(".error-message-mdp2-valide").hide();
                }

                if (!$("#pwd").val() === ("#pwd2").val()){
                    $(".error-message-mdp2-nonvalide").show();
                    $(".error-message-avant-envois").show();                
                    valid = false;
                }else{
                    $(".error-message-mdp2-nonvalide").hide();
                }               

        return valid;
    });

});
</script>
    </head>
    <body>
        <form name="formsuivi" action="compta.php" method="post">

Nom : <input type="text" name="nom" id="nom" class="form_annonce_nom_part" size="35" maxlength="35"><span class="error-message-nom" style="display: none;">Veuillez entrer votre nom</span><span class="error-message-nom-valide" style="display: none;">Veuillez entrer un nom valide</span>
    </br>
    </br>   
Adresse : <input type="text" name="adresse" id="adresse" class="form_annonce_nom_part" size="35" maxlength="35"><span class="error-message-adresse" style="display: none;">Le champ adresse est vide</span> 
    </br>
    </br>
Mail : <input type="email" name="email" id="email" class="form_annonce_nom_part" size="35" maxlength="35"><span class="error-message-email" style="display: none;">Le champ email est vide</span><span class="error-message-email-valide" style="display: none;">Veuillez entrer un email valide</span> 
    </br>
    </br>   
Code Postal : <input type="text" name="cp1" id="cp1" class="form_annonce_nom_part" size="4" maxlength="4"><input type="text" name="cp2" id="cp2" class="form_annonce_nom_part" size="4" maxlength="4"><input type="text" name="cp3" id="cp3" class="form_annonce_nom_part" size="4" maxlength="4"><span class="error-message-cp1" style="display: none;">Le numéro est vide</span><span class="error-message-cp1-valide" style="display: none;">Veuillez entrer un numéro valide</span> 
    </br>
    </br>   
Url : <input type="text" name="url" id="url" class="form_annonce_nom_part" size="100" maxlength="100"><span class="error-message-url-valide" style="display: none;">Adresse URL non valide</span>   
    </br>
    </br>   
pwd1 : <input type="password" name="pwd" id="pwd" class="form_annonce_nom_part" size="20" maxlength="20"><span class="error-message-mdp-valide" style="display: none;">Veuillez entrer votre mot de passe</span>
    </br>
pwd2 : <input type="password" name="pwd2" id="pwd2" class="form_annonce_nom_part" size="20" maxlength="20"><span class="error-message-mdp2-valide" style="display: none;">Veuillez entrer votre mot de passe</span><span class="error-message-mdp2-nonvalide" style="display: none;">Les mots de passe ne sont pas identiques</span>
    </br>
    </br>   
    <div class="error-message-avant-envois" style="display: none;">Oups !</div>
            <input type="submit" class="upload1" value="Créer mon compte" name="upload1" id="upload1"/>               
        </form>

    </body>
    </html>

8 réponses

utilisateur
Auteur
Réponse acceptée

ok bon j'ai essayé d'adapter et je n'ai pas su le faire fonctionner par contre j'ai adapté un autre bout de code et ça fonctionne donc je le donne au cas où quelqu'un en ai besoin...

jQuery(function(){
        $("#upload1").click(function(){
        $(".error").hide();
        var hasError = false;
        var passwordVal = $("#pwd").val();
        var checkVal = $("#pwd2").val();
        if (passwordVal == '') {
            $("#pwd").after('<span class="error">Please enter a password.</span>');
            hasError = true;
        } else if (checkVal == '') {
            $("#pwd2").after('<span class="error">Please re-enter your password.</span>');
            hasError = true;
        } else if (passwordVal != checkVal ) {
            $("#pwd2").after('<span class="error">Passwords do not match.</span>');
            hasError = true;
        }
        if(hasError == true) {return false;}
    });
});

Merci infiniment betaWeb et Benjamin Derepas pour votre aide

kanah

Salut

Ligne 84 tu as oublié 

$

il faut que tu mettes 

if (!$("#pwd").val() === $("#pwd2").val()){
utilisateur
Auteur

Merci kanah

Bien vu cependant, le formulaire est envoyé même avec des mots de passe différents

Benjamin Derepas

tu ecoute l'evenement click et tu return simplement le resultat.
tu devrais plutot ecouter le "submit" et bloquer l'envois

betaWeb

@Benjamin Derepas +1 c'est plus propre comme méthode en effet :)

utilisateur
Auteur

Heum oui mais ça ne testera pas l'égualité, d'écouter le submit C'est ça que je vois pas en fait ??

betaWeb

Bien sur quer si, mais il te faut attacher l'event !
JS

document.querySelector('#mon_form').addEventListener('submit', function(e) {
    if (document.getElementById('pwd').value !== document.getElementById('pwd2').value) {
        alert('Attention, le mot de passe de confirmation est différent du mot de passe !');
        e.preventDefault();
        return false;
    }
}, false);

jQuery:

$('#mon_form').submit(function(e) {
    if ($('#pwd').val() !== $('#pwd2').val()) {
        alert('Attention, le mot de passe de confirmation est différent du mot de passe !');
        e.preventDefault();
        return false;
    }
});
utilisateur
Auteur

Haaaaaaa ! ok j'ai compris - je teste et je fais un retour...