11542 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Voilà, j'ai un formulaire et je voudrais vérifier si la vérification du mot de passe corresponde au mot de passe, directement. Mais mon code ne fonctionne pas Smiley decu .

Le Javascript
<script type="text/javascript">
var pass;
var  cf_pass  
     function change()
     {
    
     pass = document.getElementById('pass').value;
     cf_pass = document.getElementById('vpass').value;
	 
	  if (pass != cf_pass) {
	  
     document.getElementById('affiche').innerHTML = "X";
	 }

   }
  
     </script>


Le HTML
<p><label for = "pass">       Mot de passe :   </label><input type = "password" name = "pass" id = " pass" /></p>
	<p><label for = "verif_pass"> Mot de passe 2 : </label><input type = "password" name = "verif_pass" id = "vpass" onblur="change()"/><span id="affiche" style="color:#990000;font-weight:bold;"></span></p>


J'espère que vous pourrez m'aider.

Merci
Modifié par ichigo92 (05 Sep 2010 - 13:41)
Modérateur
Bonjour,

Ça peut-être rien à voir, je n'ai pas testé ton code, mais j'ai remarqué qu'il manquait un ; après var cf_pass. Ça fait peut-être planter ton script. As-tu une erreur de script?
T'as un espace en trop au début de l'id de ton premier champ password.
Modifié par MacIntoc (30 Aug 2010 - 11:08)
Bonjour,

C'est encore moi... J'ai changé un rien le code et maintenant, il ne fonctionne pas (bien).
Je m'explique: si les deux mots de passe sont corrects, le "verif_pass" passe au vert, sinon, il est rouge. Mais là, il est toujours vert Smiley decu .

Le nouveau code :
<script type="text/javascript">
var pass1;
var cf_pass;

 pass1 = document.getElementById('pass').value;
 cf_pass = document.getElementById('vpass').value;
 
 
	 function passverif() {
	 
       if (pass1 != cf_pass) {
	  
            document.getElementById('passs').style.color = "#ff0000";
	   }
       else {
	  
	        document.getElementById('passs').style.color = "#00ff00";
	   }
     }
  
     </script>
</head>

 <p><label for = "pass">       Mot de passe :   </label><input type = "password" name = "pass" id = "pass"  /></p>
	<p><label for = "verif_pass" id="passs"> Mot de passe 2 : </label><input type = "password" name = "verif_pass" id = "vpass" onkeyup="passverif()"/></p>


Une idée ? Smiley cligne
Salut,

déjà il ne faut pas utiliser dans ce cas l'évènement onkeyup mais onblur ou mieux encore onchange : cf. http://fr.wikipedia.org/wiki/Document_Object_Model

ensuite la récupération des valeurs se faisant en dehors de la fonction elles sont toujours vides... et donc égales :
<form action="<?php echo $_SERVER['SCRIPT_NAME']; ?>" method="post">
	<p>
		<label for="pass">Mot de passe :</label>
		<input type="password" name="pass" id="pass"  />
	</p> 
	<p>
		<label for="verif_pass" id="passs">Mot de passe 2 :</label>
		<input type = "password" name="vpass" id="vpass" onchange="passverif()"/>
	</p>
	<p>
		<input type="submit" />
	</p>
</form>

<script type="text/javascript"> 
	function passverif() {
		var pass = document.getElementById('pass').value;
		var vpass = document.getElementById('vpass').value;
		if( pass != vpass ) { 
			document.getElementById('passs').style.color = "#f00"; 
		} else { 
			document.getElementById('passs').style.color = "#0f0"; 
		} 
	} 
</script> 

</body>

Modifié par Heyoan (05 Sep 2010 - 12:40)