begin process at 2012 02 05 22:12:56
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Formulaire

 > SCRIPT KIT "JAVASCRIPT" DE VERIFICATION D'UN FORMULAIRE

SCRIPT KIT "JAVASCRIPT" DE VERIFICATION D'UN FORMULAIRE


 Information sur la source

Note :
9 / 10 - par 2 personnes
9,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Formulaire Classé sous :javascript, formulaire, verification, champ, input Niveau :Expert Date de création :01/12/2005 Date de mise à jour :04/12/2005 12:46:52 Vu :39 461
Auteur : raydan

Ecrire un message privé
Site perso
Commentaire sur cette source (6)
Ajouter un commentaire et/ou une note

 Description

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

  • 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> 
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>



 Historique

04 décembre 2005 12:46:52 :
Les champs renseigné par la suite voient leur fond reapparaitre en blanc à la prochaine validation.

 Sources de la même categorie

Source avec Zip Source avec une capture BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai
Source avec Zip Source avec une capture RÉSOLUTION D'UN SYSTÈME D'ÉQUATIONS LINÉAIRES À N INCONNUES par william voirol
Source avec Zip Source avec une capture PLUGIN JQUERY LISTE MODIFIABLE (COMBO) AUTOCOMPLÉTÉE par medkarim
GESTION DE NUMÉRO DE TÉLÉPHONE SIMPLE DANS FIREFOX7 par rotomtom
Source avec Zip Source avec une capture RECOMMANDER CETTE PAGE AVEC MAILTO, ACCENT ET RETOUR LIGNE D... par weabow
Toutes les sources de la catégorie Formulaire

 Sources en rapport avec celle ci

EDITION D'UN CHAMP par macgile
DÉSACTIVER UN BOUTON SUBMIT APRÈS ENVOI DU FORMULAIRE par SoftDeath
Source avec Zip Source avec une capture PALETTE DE COULEURS par titnome
Source avec Zip Source avec une capture CONTRÔLE DES CHAMPS D'UN FORMULAIRE [CCF] par bultez
Source avec Zip FORMULAIRE AVEC VÉRIFICATION DES CHAMPS par mimosa803

Commentaires et avis

Commentaire de ivanoff1 le 02/12/2005 09:09:47

Salut !!

Sympa comme source :o)

Mais pour ton problème de forms avec l'index == 0,
Tu ne peux pas mettre : document.forms.item("nameFrame") ? (et tu le passe en paramètre à ta function)
Normalement c'est possible, non ?

A pluche

Ivanov

Commentaire de jjdagadir le 02/12/2005 12:05:08

çà 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

Commentaire de josh666 le 02/12/2005 22:52:56

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

Commentaire de abdelaziz_info le 03/12/2005 07:55:46



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;
            
}
}

Commentaire de vaesoli le 09/02/2006 11:26:21

ç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?

Commentaire de angellestat le 10/02/2010 13:25:01

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

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

verification champ de formulaire [ par elanspeech ] Bonjour,Je souhaiterais verifier le bon formatage et la validite d'une date entree dans un champ de formulaire.formatage jj/mm/aaaa, avec jj &lt; 32, Formulaire avec verification dynamique [ par bladebo ] BonjourVoila j'aimerai savoir comment faire pour vérifier un formulaire et faire un affichage qui se modifie si certaines zones du formulaire ne sont Question javascript!! [ par flox22 ] Salut tout le monde voila je debute en javascript et g besoin d'un peu d'aide. G un formulaire a plusieurs champ du style &lt;input type="text" name valeur d'un champ formulaire récupèrer d'un code javascript [ par katousa ] bonjour, je viens de commencer &#224; programmer avec javascript, mon pb, est queje veux afficher la valeur du date et l'heure actuel&nbsp;calculer da Verification de formulaire [ par Dunya ] Bonjour J'essaie désespérément de vérifier un formulaire avec javascript depuis des jours. J'ai beaucoup lu y compris sur ce forum mais je ne vois pa Simuler l'appui sur un bouton 'input' d'un formulaire par javascript [ par Macintosh ] Bonjour ! Je suis un débutant et j'ai besoin d'aide !!! J'utilise un javascript pour générer un DatePicker (base Démo CalendarXP) dans mon formulair Javascript PDF formulaire case obligatoire [ par nekosan3 ] Bonjour, Voilà mon soucis : j'ai réalisé un formulaire avec 4 cases à cocher dont la dernière est en liaison avec un champ à remplir. Je voudrais ren Besoin du path de l'image [ par DeadStar117 ] Bonjour, J'ai besoin d'un petit coup de main. J'essaie de créer un formulaire qui permet de sauvegarder une image sur un serveur MySQL. Le problème e Fonction if/else Javascript [ par Golfaddict ] Bonjour à tous, Je suis en train de créer un bon de commande électronique "poussé" pour un client très exigent et je n'ai pas du tout l'habitude d'é


Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Waterfall in Kauai Hawaii With RainbowPhoto Renewable Energy is Within Reach
Photo Rural Road in the Eastern Sierras 

Visiter la photothèque
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 2,137 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)