CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 09 09 12:54:43

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Formulaire

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

SCRIPT KIT "JAVASCRIPT" DE VERIFICATION D'UN FORMULAIRE

Information sur la source

Note :

9,00 / 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 :35 887

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

SYSTÈME DE NOTATION PAR ÉTOILES SURVOLÉES AVEC JQUERY par Visibeo

JDMATH : LE PREMIER ÉDITEUR D'ÉQUATION EN HTML WYSIWYG par jdmcreator

CLAVIER NUMERIQUE SECURISÉ par kazma

FAUX FURETEUR DE DOSSIER par jdmcreator

DÉSACTIVER UN BOUTON SUBMIT APRÈS ENVOI DU FORMULAIRE par SoftDeath

Toutes les sources de la catégorie Formulaire

Sources en rapport avec celle ci

DÉSACTIVER UN BOUTON SUBMIT APRÈS ENVOI DU FORMULAIRE par SoftDeath

PALETTE DE COULEURS par titnome

CONTRÔLE DES CHAMPS D'UN FORMULAIRE [CCF] par bultez

FORMULAIRE AVEC VÉRIFICATION DES CHAMPS par mimosa803

EXEMPLE D'UN FORMULAIRE DONT CES CHAMPS SONT VÉRIFIÉS PAR JA... par amine_arbitre

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 < 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 <input type="text" name valeur d'un champ formulaire récupèrer d'un code javascript [ par katousa ] bonjour, je viens de commencer à programmer avec javascript, mon pb, est queje veux afficher la valeur du date et l'heure actuel 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 Passage d'une variable dans un formulaire [ par jeanmarieb ] Bonjour, Je voudrais me servir du résultat du champ précédent dans le champ suivant Exemple : suivant le choix effectué dans le champ où je peux Popup css? avec formulaire inside [ par DaD92 ] Salut à tous, Je ne suis pas très fort en développement, je connais un peu les CSS et le php, mais mon petit cerveau c'est arrêté là pour l'instant. Question sur control de formulaire en JS [ par Vylco ] Bonjour, voila j'ai créer un formulaire en html, je vois comment comment controler si un champ est vide mais en plus de sa j'aimerais que quand un cha Comment inserer dynamiquement un champ input [ par aholigans ] salut à vs ts, en faite j'ai le meme probleme que jarod1980, j'ai un tableau contenant 7 champs tewte (textfields), lorsque je clique sur un boutton u Retour vers un formulaire [ par jytest ] Bonsoir, J'ai créé un formulaire par html. J'ai fait une validation de champs via le php (ex."email") Mais... Si un champ n'est pas valide, je n'arri

Nos sponsors

Derniers Blogs

PARUTION DE MON LIVRE SUR WPF 4 par odewit

EDM : COMMENT UTILISER L'HORIZONTAL ENTITY SPLITTING par Matthieu MEZIL

[WP7DEV][REACTIVE] RENDRE LES REACTIVE EXTENSIONS PLUS STABLES par jay

[SHAREPOINT 2010] [VISIO] MANIPULATION N°1 : COMMENT GéNéRER AUTOMATIQUEMENT LA CARTE D'UN SITE WEB AVEC VISIO ? par Patrick Guimonet

WINDBG / SOS / PSSCOR2 : FAILED TO LOAD DATA ACCESS DLL (MSCORDACWKS) par coq

Forum

RE : REMPLIR PLUSIEURS CASES D'UN FORMULAIRE AVEC LE RESULTAT D'UNE SELECTION PROVENANT D'UNE POPUP par patingfree

SWITCH D IMAGE AVEC UN "SELECT" par pl4hs

RE : AFFECTER DES VALEURS à DES COLONNES D'UN TABLEAU par PetoleTeam

RE : OBTENIR LE Z-INDEX D'UN éLéMENT DéFINIT EN CSS par gr43

OBTENIR LE Z-INDEX D'UN éLéMENT DéFINIT EN CSS par gr43

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Recherche consultant NET C Sharp
Budget : 12 000€
Integration parametrage formation Question writer 4 Hot potatoes
Budget : 300€
URGENT Creation site vitrine Joomla Laboratoire protheses dentaires
Budget : 600€

Logiciels

Microsoft Office (2010)
MICROSOFT OFFICE (2010)

Microsoft Office 2010 offre de nouveaux moyens flexibles et puissants pour optimiser votre travai...

Cliquez pour télécharger Microsoft Office
SeaMonkey (2.0.7)
SEAMONKEY (2.0.7)

Le projet SeaMonkey est issu d'un effort communautaire pour developper une application tout en un...

Cliquez pour télécharger SeaMonkey
Safari (5.0.2)
SAFARI (5.0.2)

Le navigateur d'Apple a lui aussi été mis à jour, aussi bien dans sa mouture Windows que celle po...

Cliquez pour télécharger Safari
Mozilla FireFox (4.0 béta 5)
MOZILLA FIREFOX (4.0 BéTA 5)

Firefox 4.0 béta 5 L'une des nouveautés visibles les plus attendues réside sans doute dans l'a...

Cliquez pour télécharger Mozilla FireFox
Mozilla Firefox (3.6.9)
MOZILLA FIREFOX (3.6.9)

Firefox 3.6.9 corrige les problèmes suivants : * Introduced support for the X-FRAME-OPTION...

Cliquez pour télécharger Mozilla Firefox