Script kit "javascript" de verification d'un formulaire

Commenter

Contenu du snippet

J'ai reflechis sur un code Javascript qui permet de verifier automatiquement si tous les champs d'un formulaire sont renseigné (sans ternir compte du type de donnée qui y est inscrit) . Ainsi, quelque soit votre formulaire ce code fonctionnera. Seuleument verifier la position de votre formulaire dans le DOM de la page web. dans ce script il n'y a qu'un seul formulaire donc le tableau forms a pour indice 0 =>forms[0]. Treve de bavardage. le script

Source / Exemple : 


script : autre.js

function check_input(){
   var message_alert = "";
   for(var i = 0; i < window.document.forms[0].length ; i++) {
      var rechRapide = window.document.forms[0].elements[i].value;
      var nom_champ = window.document.forms[0].elements[i].name;
      window.document.forms[0].elements[i].style.backgroundColor = "#FFFFFF";
      if(rechRapide == "") {
         window.document.forms[0].elements[i].focus();
         window.document.forms[0].elements[i].style.backgroundColor = "#CCCCCC";
         message_alert +=" Veuillez remplir le champ " + nom_champ +"\n";
      }
   }
   if (message_alert == "") {
         return true;
      } else {
         message_alert = "Informations omises dans le formulaire : \n" + message_alert;
         alert(message_alert);
         return false;
         }
} 

fichier html : index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Essai verif champ </title>
<script type="text/javascript" src="autre.js"> </script>
</head>

<body>
<form name="form1" method="GET" action="lire.php" onSubmit = "var resultat = check_input(); return resultat;" >
<table width="500" border="0" cellspacing="0" cellpadding="2" class="Texte_form">
              <tr>
                <td width="84">Numéro client </td>
                <td><input type="text" name="Numéro_client" value="" size="6">
                </td>
                <td colspan="2"> </td>
              </tr>
              <tr>
                <td>NOVA </td>
                <td width="82"><input type="text" name="NOVA" value="" size="6">
                </td>
                <td width="102">Numero classement </td>
                <td width="116"><input type="text" name="Numero_classement" value="" size="6"></td>
              </tr>
              <tr>
                <td colspan="4"><table width="390" border="0" cellspacing="0" cellpadding="2" class="Texte_form">
                    <tr>
                      <td width="83">Nom du client</td>
                      <td colspan="3"><input type="text" name="Nom_du_client" value="" size="35"></td>
                    </tr>
                    <tr>
                      <td>Dénomination</td>
                      <td colspan="3"><input type="text" name="Dénomination" value="" size="35"></td>
                    </tr>
                    <tr>
                      <td>Adresse client</td>
                      <td colspan="3"><input type="text" name="Adresse_client" value="" size="35"></td>
                    </tr>
                    <tr>
                      <td>Adresse suite</td>
                      <td colspan="3"><input type="text" name="Adresse_suite" value="" size="35"></td>
                    </tr>
                    <tr>
                      <td>Code postal </td>
                      <td width="86"><input type="text" name="Code_postal" value="" size="6"></td>
                      <td width="28">Ville</td>
                      <td width="177"><input type="text" name="Ville" value="" size="18"></td>
                    </tr>
                </table>
<input type="image" src="img/save.gif" width="31" height="29" name="Submit">
</form>
</body>
</html>

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.