Script kit "javascript" de verification d'un formulaire

Soyez le premier à donner votre avis sur cette source.

Snippet vu 41 688 fois - Téléchargée 26 fois

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

Ajouter un commentaire Commentaires
Messages postés
4
Date d'inscription
vendredi 25 janvier 2008
Statut
Membre
Dernière intervention
27 novembre 2010

ce code ne fonctionne pas sous mon iexplorer 6 et firefox 3.5 je ne sais pas pourquoi.
Par rapport au test pour une page qui a plusieurs formulaire, on defini juste une valeur en parametre. voici le code:

function check_input(j){
var message_alert = "";
for(var i = 0; i < window.document.forms[j].length ; i++) {
var rechRapide = window.document.forms[j].elements[i].value;
var nom_champ = window.document.forms[j].elements[i].name;
window.document.forms[j].elements[i].style.backgroundColor = " FFFFFF";
if(rechRapide == "") {
window.document.forms[j].elements[i].focus();
window.document.forms[j].elements[i].style.backgroundColor = "dcFbaa ";
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;
}
}

j prend le numero du formulaire dans la page
exple:Pour une page avec deux form, le premier a la valeur 0 et le second 1

PS:n'oubliez pas de specifier le numero du formulaire en parametre à l'appel de la fonction
Messages postés
2
Date d'inscription
vendredi 17 décembre 2004
Statut
Membre
Dernière intervention
9 février 2006

ça marche super bien mais seulement avec un seul formulaire, quand j'ais essayé de placer la vérification pour deux formulaires se trouvant sur la même page, et bien le script qui fonctionnait très bien sous Firefox et IE s'est mis à déconner sous IE, aurais tu une solution?
Messages postés
120
Date d'inscription
lundi 19 juillet 2004
Statut
Membre
Dernière intervention
12 janvier 2017

C'est bien sauf que les éléments ratés et formatés plus tard gardent le même fond comme si n'est rien changé tester le code comme ceci et merci :




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;


///////////////////////////////////////////////// Background des éléments déjà formatés
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;

}
}
Messages postés
81
Date d'inscription
mercredi 7 juillet 2004
Statut
Membre
Dernière intervention
1 octobre 2007
1
Pratique le script... mais sa serait bien de vérifier le type de élément du formulaire pour que quand c'est un select et bien sa vérifie si l'élément sélectionner est différent de l'élément de départ ( ds les formulaire du met choisir comme premier élément)

Bonne continuation
Messages postés
127
Date d'inscription
lundi 7 avril 2003
Statut
Membre
Dernière intervention
6 mars 2009

çà marche bien, et le code est simple, une seule remarque, il faut être vigilent dans le nom des champs car le souscripteur obtient des noms bizarres si ceux ci ne sont pas explicites, comme dans ton fichier exemple d'ailleurs. Mais si on prend soin de créer un formulaire avec des champs explicites que l'on retrouvera lors du renvoi d'ommission par le JS, c'est certainement une très bonne vérif si on veut que tous les champs soient remplis.
bravo pour la simplicité,
Kenavo
Afficher les 6 commentaires

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.