Partage
  • Partager sur Facebook
  • Partager sur Twitter

Formulaire dynamique javascript

Sujet résolu
    30 janvier 2011 à 12:50:23

    slt
    voila , j'ai créé un formulaire pour mon site et je souhaite , à l'aide de javascript , le dynamiser afin d'aider le visiteur à bien le remplir et en une seule fois !!
    Il faudrait donc , lorsque le visiteur remplit un champ avec une erreur :
    -que le fond de l'input se colorie en rouge
    -qu'un message d'erreur s'inscrive à coté .

    j'ai donc créé 2 fichiers :
    voici les codes mais ca ne marche pas pour l'instant :
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
       <head>
           <title>Inscription</title>
           <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       //insertion du fichier javascript
        <script type="text/javascript" src="validation_javascript.js"></script>
        
      
       </head>
     
    <body>
    
    
    
    <h1>Inscrivez-vous</h1>
    
    <form id="forminscription" action="validation_inscrip.php" method="post" onsubmit="">
    
    <fieldset>   
    <legend>Informations générales</legend>
    <table>
    
    <tr>
    <td>
    <label for="pseudo" id="pseudolabel" >Nom de scène</label>
    </td>
    <td>
    <input type="text" name="pseudo" id="pseudo" value="Nom de scène" onblur="verifpseudo()" />
    
    <tr>
    <td>
    <label for="mdp" id="mdp" >Mot de passe</label>
    </td>
    <td>
    <input type="password" name="mdp" id="mdp" value="Mot de passe" onblur="verifregex(mdp);"/>
    </td></tr>
    
    <tr>
    <td>
    <label for="confirmmdp" id="confirmdp">Confirmation mot de passe</label>
    </td>
    <td>
    <input type="password" name="confirmmdp" id="confirmmdp" onblur="verifconfirm (confirmmdp , mdp) ; " />
    </td></tr>
    
    <tr>
    <td>
    <label for="email" id="email" >Email</label>
    </td>
    <td>
    <input type="text" name="email" id="email" onblur="verifregex(email)" />
    </td></tr>
    
    <tr>
    <td>
    <label for="confirmemail" id="confirmemail" >Confirmation Email</label>
    </td>
    <td>
    <input type="text" name="confirmemail" id="confirmemail" onblur="verifconfirm (confirmemail , email)" />
    </td></tr>
    </table>
    </fieldset>
    <input type="button" value="inscription" onclick="veriffinale();" />
    
    </body>
    </html>
    

    //fonction permettant de verifier le champ pseudo
    function verifpseudo()
       {
        //on recuper la valeur de pseudo et on teste sa longueur
        var pseudo = document.getElementById("forminscription").elements["pseudo"].value;
        if(pseudo.length <2 || pseudo.length >50)
        {
         //si la longeur est <2 ou >50 alors : 
         //on recupere le champ pseudo et on rend le fond rouge avec #fba
         var pseudocss = document.getElementById("forminscription").elements["pseudo"];
         pseudocss.style.backgroundColor = "#fba";
         //Puis on veut insrer à la suite du champ , un petit encadré qui dit "le pseudo n'est pas valide"
         var encadre = document.createElement('p');
         pseudocss.appendChild(encadre);
         var encadre_text = document.createTextNode("Votre mot de passe est faux");
         encadre.appendChild(encadre_text);
         //on retourne false en vue de la fonction finale de vérification
         return false;
         
        }
        else
        {
         //sinon on laisse le fond avec la couleur par defaut
         var pseudocss = document.getElementById("forminscription").elements["pseudo"];
         pseudocss.style.backgroundColor = "";
         return true;
        }
       }
    
    //fonction permettant de verifier le mot de passe et l'adresse email   
    function verifregex(champ)
    {
     //on recupere d'abord la valeur du champ (mdp ou email)
     var champverif = document.getElementById("forminscription").elements["champ"].value;
     var regex;
     var typec[a-z0-9._-]\.[a-z]{2.4}$/;
      typechamp = "mail";
      conditions = "Il doit être de la forme : lettresLETTRES123456789@messagerie.extension ou messagerie est par exemple \"hotmail\" et l'extention ne contient pas plus de 4 lettres.";
     }
     //ensuite on fait la verfication du champ en fonction de la regex
     if(!regex.test(champverif))
     {
      //on recupere le champ concerné
      var champcss = document.getElementById("forminscription").elements["champ"];
      //pui on lui assigne la couleur rouge
      chamcss.style.backgroundColor = "#fba";
      //on s'occcupe ensuite d'afficher un petit encadré informant le visiteur de l'erreur qu'il a commise
      var encadre = document.createElement("p");
      champcss.appendChild("encadre");
      var encadre_text = document.createTextNode("Le" + typechamp + champverif + "'est pas valide : " + conditions );
      encadre.appendChild(encadre_text);
      //on retourne false pour la fonction de verif finale
      return false;
     }
     else
     {
      //on colorie le champ avec la couleur par defaut
      var champcss = document.getElementById('forminscription').elements['champ'];
         champcss.style.backgroundColor = "";
         // on retourne true pour la fonction de verif finale
         return true;
     }
    }
    
    //fonction permettant de verifier que les confirmation de mot de passe et d'email sont bonne.
    function verifconfirm (champ , champoriginal)
    {
     //on initialise les variables :
     var champverif = document.getElementById("forminscription").elements["champ"].value;
     var valeuroriginal = document.getElementById("forminscription").elements["champoriginal"].value;
     var champcss = document.getElementById("forminscription").elements["champ"];
     var encadre = document.createElement("p");
     var encadre_text = document.createTextNode("Les " + champ + "s que vous avez entré ne sont pas identiques");
     
     
      //on doit donc verifier que les 2 mots de passe sont identiques
      if (champverif != valeuroriginal)
      {
       //on recuper donc l'input que l'on verifie et on le colorie en rouge
       champcss.style.backgroundColor("#fba");
       //puis on affiche un message informant le visiteur de l'erreur qu'il à commise
       champcss.appendChild("encadre");
       encadre.appendChild("encadre_text");
       return false;
      }
      else
      {
       //sinon on laisse la couleur par defaut
       champcss.style.backgroundColor("#fba");
       return true;
      }
     }
    }
    
    function veriffinale()
    {
     //on verifie si les fonction de verification retournent bien toutes true
     if ( verifpseudo () == true && verifregex () == true && verifconfirm () == true)
     {
      //on autorise l'envoi
      alert("c'est ok");
     }
     else
     {
      //sinon on affiche un message d'erreur
      alert("Le formulaire n'a pas été correctement rempli");
     }
    }
    


    voila excusez moi mais j'avais ecrit le code a la suite de la paire de balises .
    • Partager sur Facebook
    • Partager sur Twitter
      30 janvier 2011 à 16:29:13

      Tu as écris 120 lignes de code JS avant de constater que ça ne fonctionnait pas ? o_O

      Que dit la console d'erreurs ? (Outils -> Console d'erreurs sous Firefox)
      • Partager sur Facebook
      • Partager sur Twitter
        30 janvier 2011 à 16:29:13

        Le message qui suit est une réponse automatique activée par un modérateur.
        Les réponses automatiques permettent d'éviter aux modérateurs d'avoir à répéter de nombreuses fois la même chose, et donc de leur faire gagner beaucoup de temps.
        Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter le modérateur en question par MP.


        Merci d'utiliser les balises de code


        Bonjour,

        Les forums du Site du Zér0 disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source.
        Vous avez posté un code source sans utiliser cette fonctionnalité. Pourriez-vous éditer votre message en entourant votre code des balises <code > et </code > ?

        Cela aura pour effet de "colorer" votre code et donc d'en faciliter grandement la lecture. Vous aurez ainsi beaucoup plus de chances d'avoir des réponses.

        Voici un exemple de code non coloré avec la balise "citation" (mauvais exemple) :

        Citation

        int main(int argc, char *argv[])
        {
        long choixOperation;

        printf("Choisissez l'operation a effectuer");
        /* etc. */
        }



        Voici maintenant le même code coloré, si vous aviez utilisé la balise "code" (bon exemple) :

        int main(int argc, char *argv[])
        {
            long choixOperation;
        
            printf("Choisissez l'operation a effectuer");
            /* etc. */
        }
        


        C'est plus clair n'est-ce pas ? :)
        N'hésitez pas à éditer votre message pour changer la balise afin de colorer votre code.

        Plus d'informations à ce sujet


        Merci de votre compréhension :)
        Les modérateurs.
        • Partager sur Facebook
        • Partager sur Twitter
        Pwaite.net > Transfert de crédit téléphonique et monétisation de site web                                                                                        « I am awesome »

        Formulaire dynamique javascript

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
        • Editeur
        • Markdown