1. Accueil
  2. Tous les snippets
  3. Snippets Javascript
  4. Script kit "javascript" de verification d'un formulaire

Script kit "javascript" de verification d'un formulaire

0/5 (6 avis)

Snippet vu 41 862 fois - Téléchargée 28 fois

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

Ajouter un commentaire Commentaires
angellestat Messages postés 4 Date d'inscription vendredi 25 janvier 2008 Statut Membre Dernière intervention 27 novembre 2010
10 févr. 2010 à 13:25
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
cs_vaesoli Messages postés 2 Date d'inscription vendredi 17 décembre 2004 Statut Membre Dernière intervention 9 février 2006
9 févr. 2006 à 11:26
ç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?
abdelaziz_info Messages postés 120 Date d'inscription lundi 19 juillet 2004 Statut Membre Dernière intervention 12 janvier 2017
3 déc. 2005 à 07:55
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;

}
}
josh666 Messages postés 81 Date d'inscription mercredi 7 juillet 2004 Statut Membre Dernière intervention 1 octobre 2007 1
2 déc. 2005 à 22:52
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
cs_jjdagadir Messages postés 127 Date d'inscription lundi 7 avril 2003 Statut Membre Dernière intervention 6 mars 2009
2 déc. 2005 à 12:05
çà 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
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.