JavaScript - Validation de formulaire

La validation du formulaire se produisait normalement sur le serveur, une fois que le client avait entré toutes les données nécessaires, puis appuyé sur le bouton Soumettre. Si les données saisies par un client étaient incorrectes ou étaient simplement manquantes, le serveur devrait renvoyer toutes les données au client et demander que le formulaire soit resoumis avec des informations correctes. C'était vraiment un long processus qui imposait une lourde charge au serveur.

JavaScript fournit un moyen de valider les données du formulaire sur l'ordinateur du client avant de les envoyer au serveur Web. La validation de formulaire remplit généralement deux fonctions.

  • Basic Validation - Tout d'abord, le formulaire doit être vérifié pour s'assurer que tous les champs obligatoires sont remplis. Il faudrait juste une boucle dans chaque champ du formulaire et vérifier les données.

  • Data Format Validation- Deuxièmement, la forme et la valeur des données saisies doivent être vérifiées. Votre code doit inclure une logique appropriée pour tester l'exactitude des données.

Exemple

Nous prendrons un exemple pour comprendre le processus de validation. Voici un formulaire simple au format html.

<html>   
   <head>
      <title>Form Validation</title>      
      <script type = "text/javascript">
         <!--
            // Form validation code will come here.
         //-->
      </script>      
   </head>
   
   <body>
      <form action = "/cgi-bin/test.cgi" name = "myForm" onsubmit = "return(validate());">
         <table cellspacing = "2" cellpadding = "2" border = "1">
            
            <tr>
               <td align = "right">Name</td>
               <td><input type = "text" name = "Name" /></td>
            </tr>
            
            <tr>
               <td align = "right">EMail</td>
               <td><input type = "text" name = "EMail" /></td>
            </tr>
            
            <tr>
               <td align = "right">Zip Code</td>
               <td><input type = "text" name = "Zip" /></td>
            </tr>
            
            <tr>
               <td align = "right">Country</td>
               <td>
                  <select name = "Country">
                     <option value = "-1" selected>[choose yours]</option>
                     <option value = "1">USA</option>
                     <option value = "2">UK</option>
                     <option value = "3">INDIA</option>
                  </select>
               </td>
            </tr>
            
            <tr>
               <td align = "right"></td>
               <td><input type = "submit" value = "Submit" /></td>
            </tr>
            
         </table>
      </form>      
   </body>
</html>

Production

Validation de formulaire de base

Voyons d'abord comment faire une validation de formulaire de base. Dans le formulaire ci-dessus, nous appelonsvalidate() pour valider les données lorsque onsubmitl'événement se produit. Le code suivant montre l'implémentation de cette fonction validate ().

<script type = "text/javascript">
   <!--
      // Form validation code will come here.
      function validate() {
      
         if( document.myForm.Name.value == "" ) {
            alert( "Please provide your name!" );
            document.myForm.Name.focus() ;
            return false;
         }
         if( document.myForm.EMail.value == "" ) {
            alert( "Please provide your Email!" );
            document.myForm.EMail.focus() ;
            return false;
         }
         if( document.myForm.Zip.value == "" || isNaN( document.myForm.Zip.value ) ||
            document.myForm.Zip.value.length != 5 ) {
            
            alert( "Please provide a zip in the format #####." );
            document.myForm.Zip.focus() ;
            return false;
         }
         if( document.myForm.Country.value == "-1" ) {
            alert( "Please provide your country!" );
            return false;
         }
         return( true );
      }
   //-->
</script>

Validation du format des données

Nous allons maintenant voir comment nous pouvons valider nos données de formulaire saisies avant de les soumettre au serveur Web.

L'exemple suivant montre comment valider une adresse e-mail saisie. Une adresse e-mail doit contenir au moins un signe «@» et un point (.). De plus, le «@» ne doit pas être le premier caractère de l'adresse e-mail et le dernier point doit être au moins un caractère après le signe «@».

Exemple

Essayez le code suivant pour la validation des e-mails.

<script type = "text/javascript">
   <!--
      function validateEmail() {
         var emailID = document.myForm.EMail.value;
         atpos = emailID.indexOf("@");
         dotpos = emailID.lastIndexOf(".");
         
         if (atpos < 1 || ( dotpos - atpos < 2 )) {
            alert("Please enter correct email ID")
            document.myForm.EMail.focus() ;
            return false;
         }
         return( true );
      }
   //-->
</script>