charger une image

[scotfild]

salut les amis,j'ai un petit probleme la,en fait je vient de creer un formulaire dont voici un extrait du code

<tr>
					<td align="center">*Password/Mot de passe <font size=1>(Choisir un mot de passe)</td>
					<td><input type="password" name="password" onblur="verif_mot_de_passe(this)" width="100%"><font size=1>6 caracteres minimum</td>
					</tr>
					<tr>
					<td align="center">*Confirm password/Confirmer mot de passe<font size=1>(re-ecrire le mot de passe)</td>
					<td><input type="password" name="confirmpassword" onblur="verif_correspondance()" width="100%"></td>
					</tr>

(c'est juste cette partie du code qui nous interresse! il y a encore un tas de trucs apres!) et pour les verifications de saisie je voudrai que lorsque l'utilisateur sausie son mot de passe par exemple, si ca fait moins de 6 caracteres une image avec la croix(faux) apparait si c'est bon une image avec le juste apparait.Euh .. vous comprenez surement
MAIS JE SAIS PAS COMMENT FAIRE AIDEZ MOI

PS:Au chargement du formulaire aucune image ne doit etre chargee c'est apres la verification (onblur par exemple)que nous testons et affichons l'image appropriee..

[Invité]

Salut, je t'ai rapidement bricolé quelque chose , il existe peut-être une meilleure solution, mais de mon coté sa semble faire le boulot.

<tr>
 <td align="center">*Password/Mot de passe <font size=1>(Choisir un mot de passe)</td>
 <td><input type="password" id="password" onkeyup="verifPass(this)" onfocus="reset()" width="100%"><font size=1>6 caracteres minimum</td>
</tr>
<tr>
 <td align="center">*Confirm password/Confirmer mot de passe<font size=1>(re-ecrire le mot de passe)</td>
 <td><input type="password" id="confirmpassword" onkeyup="verifPass(this)" width="100%"></td>
</tr>

<script type= text/javascript>
function verifPass(p_elem)
{
	if(p_elem.id == "password") // Pour le champ "password".
	{
		if(p_elem.value.length >= 6) // Superieur à 6 char.
		{
			p_elem.style.backgroundColor = "Green";
		}
		else if(p_elem.value.length != 0) // Entre 1 et 5 char.
		{
			p_elem.style.backgroundColor = "Red";
		}
		else // Champ vide.
		{
			p_elem.style.backgroundColor = "White";
		}
	}
	else if(p_elem.id == "confirmpassword") // Pour le champ "confirmpassword"
	{
		if(p_elem.value.length >= 6)// Superieur à 6 char.
		{
			if(p_elem.value == document.getElementById("password").value) // Mot de passe identique.
			{
				p_elem.style.backgroundColor = "Green";
			}
			else // Mot de passe different.
			{
				p_elem.style.backgroundColor = "Red";
			}
		}
		else if (p_elem.value.length != 0) // Entre 1 et 5 char.
		{
			p_elem.style.backgroundColor = "Red";
		}
		else// Champ vide
		{
			p_elem.style.backgroundColor = "White";
		}
	}
}

function reset() // Force l'utilisateur à commencer par le champ "password".
{
	document.getElementById("confirmpassword").value = null;
	document.getElementById("confirmpassword").style.backgroundColor = "White";
}
</script>

j'ai très légèrement retouché ton code HTML, test le code avec le script dans un nouveau fichier.

Ensuite de mon point de vue je procèderais de cette façon :

Mets tes 2 images en dur dans ton code HTML, en CSS ajoute une propriété "visibility: hidden" elles seront cachées au chargement de la page.

Ajoute des variables qui pointent vers tes images dans les fonctions js, et change les propriétés src et visibility.
Au niveau des couleurs que j'ai mis dans l'exemple :

Rouge:
visibility="visible"
src="/invalid.png"

Vert:
visibility="visible"
src="/valid.png"

Blanc:
visibility="hidden"

[Anonyme77]

Je suis d'accord avec Erenox, la solution la plus simple me semble être de changer la visibilité des images dans le code. Ce qui implique qu'elles soient déjà présentes.

Je testerai tout de même, pour l'expérience, d'ajouter une balise img dans le dom et voir si il fait la requête pour aller la chercher. Je pense qu'il existe des méthodes appendChild (si mes souvenirs sont exacts).

[int80h]

Une meilleure pratique serait de changer la classe de l’élément si la validation est bonne, et dans cette nouvelle classe "validate" on aurait le fond vert et l'image.

Mais ça marche bien comme ça aussi hein, juste une question de "finition".

[Anonyme77]

Pensez vous qu'ajouter la balise img dans le dom enjendrerai l'envoi de la requête pour aller chercher l'image spécifiée ?

[fred]

Le principe semble assez simple

image = null // ou autre, je connais pas javascript
Si longueur de password inférieur à 6
    image = nogood
Si longueur de password supérieur ou égale à 6
    image = good
Si image différent de null
    charger image
    afficher image

Bref si on maîtrise un peu le langage ça doit pas être bien compliqué de faire cela, si ?

D'ailleurs il y a un exemple plus complet ICI où on voit que le HTML5 c'est le bien!