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

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Transformer une fonction 'unique' en fonction générale

par AB » 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.

par VaN » 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.

par AB » 11 janv. 2008, 21:22

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

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)

par VaN » 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 ?

par AB » 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); }

par Genova » 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.

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

par VaN » 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 ?