Changement image en fonction valeur input

Version imprimable

Bonsoir à tous,

je me suis mis dernièrement au JavaScript à l'approche de mes PTI de BTS ;)
j'essaie désespérément de réaliser un contrôle de saisie sur un formulaire.

Par exemple je contrôle la syntaxe de l'email en regardant si la valeur de l'input contient "@" jusque là rien d'extraordinaire me direz-vous :p

Si l'email n'est pas correct alors j'affiche une fenêtre d'alerte.
C'est ça que je voudrais changer, j'aurais voulu qu'en fonction de la valeur dans l'input une image s'affiche à côté de ce dernier pou dire si la valeur est valide ou non.

Comme ceci :

http://www.tooPix.eu/userfiles/mini/...638233e700.jpg

Voici le code de l'input :

Code:

<input type="text" onblur="verifEmail();" name="email" id="email" size="10">

et la fonction javascript :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function verifEmail() { if (document.getElementById('email').value.indexOf('@') == -1) { alert('Invalid email'); return false; } if (document.getElementById('email').value !="") { if (document.getElementById('email').value.indexOf('@') == -1) { alert('Invalid email'); return false; } } }
Donc voilà si vous pouviez m'éclairer sur le sujet je vous en serais grandement reconnaissant! :p

bonne soirée ;)

11/06/2009, 02h40
miniBob

après de nombreux tests je suis arrivé à faire ce que je voulais au niveau de l'affichage des images ;)

maintenant j'aurais voulu savoir comment faire pour changer le texte en dessous du input en fonction de l'erreur !

merci pour votre aide ;)

*Recyclage de code*

C'est pas exactement ce que tu cherches, mais presque quand même.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var elements = document.forms["RegisterForm"].elements,
    i, l = elements.length;
 
for (i = 0; i < l; i++) {
    // on rajoute l'évènement
    elements[i].onfocus = function () {
        var nextNode,aide = document.createElement("p");
        aide.innerHTML = "Aide : "+ this.title; 
        aide.id = this.name+"_aide"; // on rajoute un id pour pas enelver n'imp après
        this.parentNode.insertBefore(aide, this.nextSibling); 
    };
 
    elements[i].onblur = function () {
        var el = document.getElementById(this.name+"_aide");
        el.parentNode.removeChild(el);
    };
}

Avec pour formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<form id="RegisterForm" action="page2.php" method="post" enctype="multipart/form-data">
    <fieldset>
        <h3>INSCRIPTION</h3>
            <h4><label for="username">Nom d'utilisateur</label></h4>
            <input title="6-12 caractères" type="text" name="username" id="username"  class="text" maxlength="20" autocomplete="off">
            <h4><label for="password">Mot de passe</label></h4> 
            <input title="chosissez un mot de passe" type="password" name="password" id="password" value="" maxlength="20" autocomplete="off">
 
            <h4><label for="password2">Confirmer mot de passe</label></h4> 
            <input title="retapez le mot de passe" type="password" name="password2" id="password2" value=""  maxlength="20" autocomplete="off">
    </fieldset>
</form>

Essaie tel quel pour voir ce que ça fait, ensuite il suffit d'afficher ça quand il y a une erreur de saisie :)

11/06/2009, 13h15
miniBob

merci nod__ pour ton code, mais je ne vois pas réellement comment il fonctionne et comment l'utiliser ;)
11/06/2009, 13h37
miniBob

bon j'ai réglé mon soucis en utilisant une id sur un div et en mettant ce morceau de code dans le javascript

Code:

document.getElementById('divid').innerHTML = 'le message';

merci nod quand même ;)

ciao