Transformer une fonction 'unique' en fonction générale

11 janv. 2008, 19:00

Bonjour,

je suis en train de mettre au point une petite fonction JS, qui permet à l'utilisateur, lorsqu'il remplit un formulaire d'inscription sur un site, de savoir si le champs de mot de passe et le champs de vérification du mot de passe sont égaux.

Voici la fonction :

Code : Tout sélectionner

function verifPass(value) {
	if(value != document.getElementById('input_pass').value)
		document.getElementById('output_pass').innerHTML = '<img src="img/picto_no.gif" alt="" />';
	else
		document.getElementById('output_pass').innerHTML = '<img src="img/picto_yes.gif" alt="" />';
}

et le bout de formulaire auquel elle se rattache :

Code : Tout sélectionner

<tr>
        <td>Password :</td>
        <td><input type="password" class="normal-input" name="pass" id="input_pass" /></td>
      </tr>
      <tr>
        <td>Confirmer password :</td>
        <td><input type="password" class="normal-input" name="pass2" onKeyUp="verifPass(this.value)" /> <span id="output_pass"></span></td>
      </tr>

J'aimerais faire de même pour l'email et sa vérification, et plutot que de recopier cette fonction, et de la transformer pour qu'elle marche pour mon champ e-mail, je préferai la transformer en une seule fonction générale, qui marche pour les deux. Je l'ai transformer comme ceci :

Code : Tout sélectionner

function verifField(value, input, output) {
	if(value != document.getElementById(input).value)
		document.getElementById(output).innerHTML = '<img src="img/picto_no.gif" alt="" />';
	else
		document.getElementById(output).innerHTML = '<img src="img/picto_yes.gif" alt="" />';
}

et je l'apelle comme ceci :

Code : Tout sélectionner

onKeyUp="verifField(this.value, input_pass, output_pass)"

Lorsque la fonction se déclenche, je reçois le msg d'erreur suivante, dans la console JS :

output_pass is not defined

Comment régler ce probleme ?

11 janv. 2008, 19:15

Bonsoir,
il faut mettre

Code : Tout sélectionner

onKeyUp="verifField(this.value, 'input_pass', 'output_pass')"

tout simplement.

Ton input_pass et output_pass sont des chaînes de caractère d'après ton code originel.

11 janv. 2008, 19:56

Et tu devrais essayer de prendre la bonne habitude de ne plus utiliser innerHTML mais plutôt employer le DOM

EDIT Avec la bonne syntaxe cela pourrait ressembler à ça

Code : Tout sélectionner

function verifField(value, input, output) {
   
      var conteneur = document.getElementById(output);
	  
      var image = document.createElement('img');

      if(value != document.getElementById(input).value) 
      {
      image.setAttribute('src','img/picto_no.gif');
      image.setAttribute('alt','Mauvaise confirmation');
      }
      else
      {
      image.setAttribute('src','img/picto_yes.gif');
      image.setAttribute('alt','Confirmation OK');
      }
	  
      conteneur.appendChild(image);
}

11 janv. 2008, 20:42

Bonsoir,
il faut mettre
Code : Tout sélectionner
onKeyUp="verifField(this.value, 'input_pass', 'output_pass')"
tout simplement.

Ton input_pass et output_pass sont des chaînes de caractère d'après ton code originel.

Merci, ça marche.

Et tu devrais essayer de prendre la bonne habitude de ne plus utiliser innerHTML mais plutôt employer le DOM

Pourquoi ? quelles sont les différences ? Et comment utilise t'on le DOM, dans mon cas ?

11 janv. 2008, 21:22

Je viens d'éditer mon précédent message avec la réponse

EDIT pourquoi comme ça, parce que innerHTML n'est pas recommandé par le w3c et est une fonction spécifique à IE même si les autres navigateurs l'on implémenté plus ou moins bien dans leur navigateur par souci de compatibilité.
Mais parfois innerHTML ne marche pas bien avec les navigateurs autre que IE. Par exemple si tu utilises ça pour ajouter des champs à la volée dans un formulaire, les valeurs déjà écrites dans les champs précédents seront effacés avec FF.

Donc autant s'habituer à employer la méthode recommandée DOM qui elle passe partout (enfin pour les fonctions employées dans ce script)

23 janv. 2008, 15:41

Désolé de remonter ce topic, mais je viens de me souvenir qu'il fallait que je modifie mes innerHTML en propriétés DOM, ce que je viens de faire.

Après une petite retouche, la correction du script fourni par AB fonctionne, mais à chaque frappe de touche, il crée un nouvel élément 'img'. ce qui fait que si je tente de rentrer un password à 6 caractères, il m'affiche 5 fois de suite le picto 'no', et ensuite le picto'yes', au lieu de remplacer à chaque fois le picto généré par l'ancien onKeyUp, par le nouveau.

23 janv. 2008, 22:38

Ah oui, j'avais pas bien fait attention au fonctionnement.

En reprenant le code que je t'avais donné, pour un fonctionnement comme tu souhaites on peut compléter par :

Code : Tout sélectionner

function verifField(value, input, output) {
	  
	  var id_img = 'conf_'+input;
    
	  if (document.getElementById(id_img) == null)
	  {	
        var conteneur = document.getElementById(output);

		  var image = document.createElement('img');
	
		  if(value != document.getElementById(input).value)
		  {
		  image.setAttribute('src','img/picto_no.gif');
		  image.setAttribute('id',id_img);
		  image.setAttribute('alt','Mauvaise confirmation');
		  }
		  else
		  {
		  image.setAttribute('src','img/picto_yes.gif');
		  image.setAttribute('id',id_img);
		  image.setAttribute('alt','Confirmation OK');
		  }
			
		  conteneur.appendChild(image);
	  }
	  
	  else

	  {
		  if(value != document.getElementById(input).value)
		  {
		  document.getElementById(id_img).src='img/picto_no.gif';
		  }
		  else
		  {
		  document.getElementById(id_img).src='img/picto_yes.gif';
		  }
	  }
	  
}

Bon c'est fait à l'arraché (y'a peut-être plus simple) mais c'est fonctionnel et facilement compréhensible.
Cela te donneras un peu l'habitude de travailler avec le DOM

EDIT Cela n'est pas "une correction" mais une façon de faire conforme au standard. Autant apprendre ces méthodes, elles te resserviront par la suite.

Transformer une fonction 'unique' en fonction générale

Qui est en ligne