Annonce

Réduire
Aucune annonce.

charger une image

Réduire
X
 
  • Filtre
  • Heure
  • Afficher
Tout nettoyer
nouveaux messages

  • charger une image

    salut les amis,j'ai un petit probleme la,en fait je vient de creer un formulaire dont voici un extrait du code
    Code HTML:
    <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..
    sigpic
    No man's land here let's hack together hahaha

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



    Code HTML:
    <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>
    Code:
    <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"
    Dernière modification par Erenox, 27 juin 2015, 04h48.

    Commentaire


    • #3
      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).

      Commentaire


      • #4
        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".

        Commentaire


        • #5
          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 ?

          Commentaire


          • #6
            Le principe semble assez simple

            Code:
            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!
            Dernière modification par fred, 27 juin 2015, 13h25.

            Commentaire

            Chargement...
            X