Discussion :

[miniBob]

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 :



Voici le code de l'input :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et la fonction javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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

[nod__]

*Recyclage de code*

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[miniBob]

merci nod__ pour ton code, mais je ne vois pas réellement comment il fonctionne et comment l'utiliser

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

merci nod quand même

ciao