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

Ce site au démarrage

begin process at 2010 03 20 03:24:49

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 :33 608

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

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

IMPLEMENTATION DE RANDOM PERSONNALISÉ par ousous

IMPLEMENTATION DE HASHTABLE par ousous

JAVASCRIPT.UTIL.ITERATOR par ousous

PALETTE DE COULEURS par titnome

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

COMMENT MAPPER UNE VUE SQL SUR UNE COLLECTION DE COMPLEX TYPE? par Matthieu MEZIL

SQL SERVER : QUERY NOTIFICATION OU COMMENT êTRE NOTIFIé DE MODIFICATIONS DE DONNéES CôTé APPLICATION (SQLDEPENDENCY) par christian

[WF4] UN BINDING ACTIVITY/ACTIVITYDESIGNER QUI PASSE MAL? par JeremyJeanson

MYTIC - SHAREPOINT 2010 : DéJà UN MYTHE MICROSOFT ? par junarnoalg

TECHDAYS 2010 GENèVE : RETROUVEZ-MOI POUR UNE SESSION SUR LA HAUTE DISPONIBILITé ET LE SCALEOUT AVEC SQL SERVER par christian

Forum

COMMENT CRéER UNE COMPTEUR EN JAVASCRIPT? par stefoulefou

MODIFIER DYNAMIQUEMENT LES COORDONNéES MAP D'UNE IMAGE CLIQUABLE par eguignier

APPELER UNE ANCRE D'UNE AUTRE PAGE AU COEUR D'UNE FONCTION JAVASCRIPT par MissArmande

RE : TRI PAR ORDRE ALPHABéTIQUE par PetoleTeam

RE : TRI PAR ORDRE ALPHABéTIQUE par El_CaNaRdO

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Logiciels

Academy System (10.9.4.0)
ACADEMY SYSTEM (10.9.4.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)
XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)

Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise...

Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate
Xilisoft DVD Ripper Ultimate (5.0.64.0304)
XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)

Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ...

Cliquez pour télécharger Xilisoft DVD Ripper Ultimate
Axalot, logiciel de sauvegarde de données en ligne (1.10.108.1)
AXALOT, LOGICIEL DE SAUVEGARDE DE DONNéES EN LIGNE (1.10.108.1)

Perdre tout le contenu de votre disque dur, vous imaginez ? Vos photos, vos musiques, votre compt...

Cliquez pour télécharger Axalot, logiciel de sauvegarde de données en ligne
Rigs of Rods (63.3)
RIGS OF RODS (63.3)

c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo...

Cliquez pour télécharger Rigs of Rods