1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
Dismiss Notice
Welcome to our Education website, plz like our page facebook to support us. Thank You and wish you good navigation

validation formulaire javascript

abdelouafiJan 13, 2018 at 10:26 AM

    1. abdelouafi

      abdelouafi Administrator Staff Member

      Messages:
      537
      Likes Received:
      10
      Trophy Points:
      18
      Joined
      Sep 13, 2016
      on va voir la validation du formulaire en javascript:

      1- créer d'abord le formulaire suivant:
      upload_2018-1-13_10-23-39.png

      2- Créer un fonction en javascript pour vérifier la saisie du login?

      3- Créer un fonction en javascript pour vérifier la saisie de l'E-mail?

      4- Créer un fonction en javascript pour vérifier la saisie de l'âge?

      5- Créer un fonction global en javascript pour faire une vérification globale la saisie de tous les champs?


      6- Proposez une deuxième méthode pour répondre aux 5 derniers exercices??


      7- Sans utiliser Javascript, vérifier la saisie de tous les champs?
       
      Last edited: Jan 13, 2018 at 11:12 AM
      Loading...
      Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Validation d'un formulaire :</title>
      <script>
      
      
      function souligner(champ, erreur)
      {
          if(erreur)
              champ.style.background="#fba";
          else
                  champ.style.background="";
      }
      
      // fonction qui vérifie le login saisie
      
      function veriflogin(par1)
      {
          if(par1.value.length<2 || par1.value.length>30)
          {
              souligner(par1,true);
           
              par1.value="login court ou plus long";
              return false;
          }
          else
          {
              souligner(par1,false);
              return true; 
          }
      }
      
      
      //fonction qui vérifié l'age
      
      function verifage(par)
      {
          var x=parseInt(par.value);
          if(x<=0 || x>150)
              {
                  souligner(par, true);
                  par.value="age incorrect";
                  return false;
              }
          else
              {
                  souligner(par, false);
                  return true;
              }
           
      }
      
      
      //fonction qui vérifie l'email
      function verifMail(champ)
      {
         var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
         if(!regex.test(champ.value))
         {
            souligner(champ, true);
            return false;
      
         }
         else
         {
            souligner(champ, false);
            return true;
         }
      }
      
      // Vérifier le formulaire avant l'envoie
      
      
      function verifForm(par)
      {
          var loginok= veriflogin(par.logi);
          var emailok=verifMail(par.email);
          var ageok=verifage(par.a1);
       
          if(loginok && emailok && ageok)
              {return true;}
           
          else
          {
           
              alert("erreur");
              return false;
           
          }
      }
      
      </script>
      
      
      </head>
      
      <body>
      
      
        <form action="" onsubmit="return verifForm(this)">
        <p>
          Login : <input type="text" name="login"  onblur="veriflogin(this)" /><br /><br />
          E-mail : <input type="text" name="email"  size="30" onblur="verifMail(this)" /><br /><br />
          Âge : <input type="text" name="age"  size="2" onblur="verifage(this)" /> ans<br /><br />
          <input type="submit" value="Valider" />
        </p>
      </form>
      
      </body>
      </html>
      



      Méthode 2:

      Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Validation d'un formulaire :</title>
      <script>
      
      function verifForm()
      {
          var x=document.f1.login.value;
          if(x=="")
          {
              f1.login.style.background="#fa0";
              f1.login.value="login obligatoire"
              return false;
          }
        
        
        
          //vérifie l'age
        
          var a=document.f1.age.value;
          if(a=="")
          {
              f1.age.style.background="#fa0";
              f1.age.value="age obligatoire"
              return false;
          }
        
          //vérifie l'email
        
          var em=document.f1.email.value;
      
        
          var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
         if(!regex.test(f1.email.value))
         {
            f1.email.style.background="#fa0";
              f1.email.value="email obligatoire"
            return false;
      
         }
      
             if(em=="")
          {
              f1.email.style.background="#fa0";
              f1.email.value="email obligatoire"
              return false;
          }
        
        
        
      }
      
      </script>
      
      
      </head>
      
      <body>
      
      
        <form name="f1" action="" onsubmit="return verifForm()">
        <p>
          Login : <input type="text" name="login" /><br /><br />
          E-mail : <input type="text" name="email"  size="30"  /><br /><br />
          Âge : <input type="text" name="age"  size="10"/> ans<br /><br />
          <input type="submit" value="Valider" />
        </p>
      </form>
      
      </body>
      </html>
      


      7-
      Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Untitled Document</title>
      </head>
      
      <body>
      <form action="" method="post">
        Login: <input type="text" name="nom" required><br /><br />
        E-mail:<input type="text" name="email" required><br /><br />
        Age:<input type="text" name="age" required><br /><br />
       
        <input type="submit" value="Submit">
      </form>
      </body>
      </html>
      

Share This Page

Share