begin process at 2012 05 28 11:42:49
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Formulaire

 > VALIDATION AUTOMATIQUE DES FORMULAIRES

VALIDATION AUTOMATIQUE DES FORMULAIRES


 Information sur la source

Note :
9,25 / 10 - par 8 personnes
9,25 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Formulaire Niveau :Expert Date de création :11/01/2005 Date de mise à jour :18/02/2005 15:22:31 Vu / téléchargé :14 398 / 2 287

Auteur : tguerlus

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

 Description

Fini la programmation de fonction pour controler la saisie des champs. Voici la classe TValidator qui vous permet de faire des controles de saisies sur les champs input de type text avec un minimum de saisie.
Pour utiliser cette classe il suffit d'inclure les 2 fichiers prototype.js et Validator.js dans votre page web. Ensuite, pour chaque champs input dont vous voulez controler la saisie, il suffit de renseigner l'attribut "alt" de la balise avec une syntaxe bien précise.
Vous avez une page html d'exemple pour vous aider à comprendre et un fichier texte décrivant la syntaxe de la grammaire de test.
Enfin, pour soumettre un formulaire il suffit d'executer le code javascript suivant:
Validator.Submit(document.nomformulaire);


 Conclusion

Merci bultez pour l'idée d'ajouter un attribut en lui passant une commande. Je n'ai pas conservé le nom de l'attribut "controle", car je me suis aperçu que cela n'été pas compatible avec les moteurs Gecko (Mozilla,FireFox...). Ils n'ajoutent pas l'attribut dans le modele objet javascript. J'ai donc décidé d'utiliser l'attribut "alt" des balises input car il est connu de tous les navigateurs, et tous les navigateurs savent afficher une telle balise.
J'ai aussi enrichi le language de commande afin que toutes les informations soient regroupées dans "test". A l'exception de l'information "champ obligatoire" qui est stocké différement. Reportez-vous à la description de la grammaire.

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

11 janvier 2005 14:29:13 :
Explications finales sur les choix que j'ai fait au niveau de l'implementation.
11 janvier 2005 14:34:48 :
Toujours un probème avec l'orthographe
12 janvier 2005 09:50:14 :
Ajout du controle du numéro de secu et du controle sur les fichiers
12 janvier 2005 10:39:46 :
Ca y est les cases ou il y a des erreurs changent de couleur. J'ai ajouté 2 attributs dans l'objet Validator: BackGroundError et BackGroundValid, il suffit de leur affecter la couleur que vous souhaitez.
12 janvier 2005 14:18:20 :
Mise à jour de la grammaire. Vous avez à votre actif 32 formats de date
13 janvier 2005 10:21:23 :
J'ai complété la collection de contrôle sur les dates, 128 formats de date. J'ai aussi mis la grammaire à jour avec quelques commentaires suplémentaires.
11 février 2005 16:54:32 :
Comme promis dans mon dernier commentaire, voici la nouvelle mouture. La grammaire a été mise à jour.
15 février 2005 13:51:36 :
Correction d'un bug au niveau de la classe TValidator soumit par saturno. Pb corrigé: Mauvaise initialisation de la variable test. Remplacer le fichier TValidator.js
16 février 2005 16:33:24 :
Voici des nouveautés toutes fraiches. Au programme: 1 - On peut donnée des ensembles de bornes au date. exemple: pour dire que l'on veut une date au format jj mmm aaaa (ex:12 février 1994) entre 04/02/2005 et le 18/05/2005 ou entre le 25/11/2005 et le 14/12/2005 on ecrira: alt="test:dt!jj mmm aaaa?20050204&20050518^20051125&20051214" remarque : il faut ecrire les bornes date au format aaaammjj vous pouvez utiliser aussi -inf et +inf pour faire des ensembles du style moins l'infini au 25/12/2000 (test:dt!jj mmm aaaa?-inf&20001225) Le contrôle des bornes marche avec tous les formats de dates possibles sauf les formats qui n'inclusent pas l'année (ex:jj/mm) 2 - On peut définir un format d'heure avec la gestion des bornes exemple: pour dire de saisir une heure en forçant l'écriture des heures, des minutes et des second sur deux chiffres, comprise entre 8h et 12h30 ou entre 18h25min30s et 21h15 on ecrira: alt="test:hr!fx?08&1230^182530&2115" remarque: les bornes heures peuvent avoir les formats suivants hhmmss, hhmm ou hh de même que pour les nombres ou les dates on peut utiliser -inf et + inf Si on ne souhaite pas fixé les heures , les minutes et les seconds sur deux chiffres il faut remplacer fx par sp (fx=fixe;sp=souple). Si on a pas besoin de borne de contrôle on peut ecrire tout simplement: alt="test:hr!fx"
18 février 2005 15:10:12 :
Ajout d'une fonctionalité suplémentaire. Vous pouvez appeler une fonction programmée par vos soin en second parametre de la méthode Validfator.Submit. Exemple: 1/ déclaration d'une fonction sans paramètre effectuant des tests de cohérances entre les champs du formulaire. cette fonction doit retourner la chaine de caractere "" si le test est ok sinon elle renvoi un message d'erreur ex: function test() { var err = ""; if (Number(document.ess.nbrentier4.value) > Number(document.ess.nbrdcp.value)) err = "le champ (1) doit-être inférieure ou egal au champ (2)"; return err; } 2/ Appel de la fonction par l'objet Validator Validator.Submit(document.nom_formulaire,'test()'); si vous n'avez pas de test supplementaire alors enlevez le second parametre Validator.Submit(document.nom_formulaire,'test()'); 3/ condition d'appel de la fonction. La methode Submit evalue la fonction uniquement si il n'y a pas d'erreur de saisi.
18 février 2005 15:22:32 :
J'avais pas mis le bon zip. ;)

 Sources du même auteur

Source avec Zip CALENDRIER COMPATIBLE TOUS PC FACILEMENT CONFIGURABLE À N'IM...
Source avec Zip LIBRAIRIE DHTML COMPATIBLE IE,MOZILLA,NETSCAPE ET OPERA

 Sources de la même categorie

Source avec Zip Source avec une capture FORMULAIRE TABLEAU par vic511
Source avec Zip Source avec une capture FORMULAIRE DYNAMIQUE par Niidhogg
Source avec Zip Source avec une capture CONTRAINTE DE SAISIE SUR CHAMPS INPUT par ryosama
SELECTS DÉPENDANTS PRÉ-CHARGÉS D'UNE SEULE OPTION par phm
Source avec Zip Source avec une capture BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai

Commentaires et avis

Commentaire de rttb le 11/01/2005 20:13:02

c'est cool et complet, il y a un oublis (j'ai pas regarde la source) si tu te trompe sur le dernier, il met champ(23) comme nom.
Si tu peux rajouter, un effet visuel, tels que changer la couleur de(s) la case(s) en cas d'erreur, j'achete ton code.
(pour pas cher j'espere)

Merci pour cette source, tres utile.

Commentaire de tguerlus le 12/01/2005 10:12:20

C'est cadeau, il y pas de quoi.

Pour ceux qui voudraient personnaliser le moyen de signaler les erreurs, je leur suggere de bien etudier la classe TValidator.

Il y a 2 méthodes essentielles associées à cette classe.

La fonction TRegExp(type) permet de retourner la syntaxe d'une expression régulière associée à un type donné. Il vous est possible d'enrichir cette fonction avec des types personnels
Exemple:
Ajoutez les lignes suivantes dans le switch de la fonction,

case 'perso':
  rep = "^[\\d]{1}[ ]...[\\d]{2}$";break;

Ensuite pour utiliser le type "perso" il suffit d'affecter à l'attribut alt de la balise input l'ordre suivant:
alt="test:perso"

La fonction TError(formulaire,champ,message) est la fonction qui est appelé en cas d'erreur de saisie .

On a à disposition l'objet formulaire, l'objet input correspondant au premier champ qui a une erreur de saisi et le message d'erreur qui regroupe toutes les erreurs trouvées. Vous pouvez ainsi redéfinir cette fonction pour effectuer ce que vous voulez comme un effet visuel, tels que changer la couleur de(s) la case(s) en cas d'erreur.

Enfin, il faut bien etudier la grammaire.
La syntaxe est du type (type:valeur). Pour type on peut avoir :

- nom qui correspond a un libellé qui indique le nom du champ. On peut ainsi personnaliser le message d'erreur, car si nom est défini, on ne trouve plus "Champ(xx)" mais le libellé du type nom.(optionnel)

- obligatoire qui correspond à l'information champ obligatoire. Par défaut un champ n'est pas obligatoire.(optionnel)

- erreur qui correspond au message d'erreur personnalisé. Ainsi, au lieu d'avoir "Le Champ(xx) est invalide" vous avez le message associé.(optionnel)

- test qui correspond au test à effectuer, pour connaitre la syntaxe des tests possible reportez vous à la grammaire.

Commentaire de bultez le 12/01/2005 14:45:08

si l'idée développée mon script a permis
de voir naitre celui-ci, alors j'en suis
particulièrement satisfait. Il va sûrement
aussi me permettre d'améliorer le mien.
@+

Commentaire de rttb le 12/01/2005 17:54:52

Cool les modifs, encore merci

Commentaire de saturnino le 11/02/2005 13:40:21

Bonjour, et bravo pour le script, quel gain de temps!!!

Cependant,, comment définir un champs de type nombre mais pas strictement entier ou décimal?

merci

Commentaire de tguerlus le 11/02/2005 14:33:02

Utilise les expressions régulières pour tous les types "fantaisiste"
Exemple pour saisir un nombre entier ou décimal tu peux utiliser ceci:

alt="reg!^([0-9]+)|([0-9]+[.][0-9]+)$"

Sinon tu attend la prochaine mouture qui va arriver d'ici peu.
Au programme:
1/ saisie d'un nombre qu'il soit entier ou décimal avec controle des bornes inférieures et supérieures.
Syntaxe :
nbr!nbr>([entier])([separateur]([entier]))(?([numeric])(?([numeric])))

2/ possibilité de faire des unions d'ensemble permettant par exemple de dire que l'on veut un nombre compris entre 0 et 10 ou 25 et 30
Syntaxe :
nbr![format nombre](?[numeric]&[numeric](^[numeric]&[numeric](^...)))
exemple nbr!dc>.2?0&10.2^25&30

A bientôt ;)

Commentaire de saturnino le 15/02/2005 11:15:17

Bonjour et merci pour ta réponse

cependant, j'ai bug à l'attribution de champs obligatoire au sein d'une boucle.

<input name="numLotGSL_'.$num.'" type="text" class="ch_0" alt="obligatoire:true" />

me pose problème, en effet, le script me retourne toujours "champs invalide" à partir du deuxième champs trouvé de ce type même si je les rempli...

Aurais-tu une idée? merci encore




for( $i = 0 ; $i < $_POST['nbrLots'] ; $i++){
  
  $num = $i+1;
  $form .= '<tr onMouseOver="this.style.backgroundColor=\'#ccccff\'"  onMouseOut="this.style.backgroundColor=\'\'">
  <td>'.$num.'</td>
   <td class="trait_G"><input name="numLotGSL_'.$num.'" type="text" class="ch_0" alt="obligatoire:true" /></td>
  <td><input name="batGSL_'.$num.'" type="text" class="ch_1" /></td>
  <td><input name="nivGSL_'.$num.'" type="text" class="ch_2" /></td>
  <td><input name="typeGSL_'.$num.'" type="text" class="ch_3" /></td>
   <td class="trait_G"><input type="checkbox" name="parkingGSL_'.$num.'" value="1" /></td>   
   <td class="trait_G"><input name="surfaceHabGSL_'.$num.'" type="text" class="ch_5" /></td>
  <td><input name="surfaceLoggiaGSL_'.$num.'" type="text" class="ch_6" /></td>
  <td><input name="surfaceUtileGSL_'.$num.'" type="text" class="ch_7" /></td>
   <td class="trait_G"><input name="prixImmoGSL_'.$num.'" type="text" class="ch_8" alt="test:nbr!int?0?1000000 ; obligatoire:true" /></td>
  <td><input name="prixPackGSL_'.$num.'" type="text" class="ch_9" alt="test:nbr!int?0?1000000 ; obligatoire:true" /></td>
   <td class="trait_G"><input name="loyerGSL_'.$num.'" type="text" class="ch_10" alt="test:nbr!int?0?1000000 ; obligatoire:true" /></td>
   <td class="trait_G"><input name="fraisNotaireGSL_'.$num.'" type="text" class="ch_11" alt="test:nbr!int?0?1000000 " /></td>
   <td class="trait_D"><input name="fraisHypoGSL_'.$num.'" type="text" class="ch_12" alt="test:nbr!int?0?1000000 " /></td>
</tr>';
  
  }

Commentaire de saturnino le 15/02/2005 11:59:34

yop

bon en fait j'ai trouvé : en faisant un test sur le contenu du champs çà marche.

alt="test:reg!^([0-9]+)|([a-z]+)|([A-Z]+)|([0-9]+[.][0-9]+)$;obligatoire:true"

@+

saturnino

Commentaire de tguerlus le 15/02/2005 13:45:34

J'ai réussi à reproduire le bug. En effet, il y avait un beans qui maintenant corrigé.

Je met en ligne le correctif tout de suite.

Sinon voici un lien sur un tutorial sur les expressions regulieres en javascript:
http://www.asp-php.net/tutorial/scripting/regexp.php
Ca peut être utile.

N'hésite pas si tu as un autre pb.
A+

Commentaire de saturnino le 15/02/2005 14:41:01

merci

ben en fait je ne m'étais jamais penché sur les regexp

et finalement on fini par comprendre donc j'utilise maintenat des regexp directement dans test pour contrôler mes champs de type nombre.

tout script m'auras fait découvrir la puissance des expressions régulières.

merci
ciao
saturnino

Commentaire de saturnino le 15/02/2005 18:55:00

Voilà, je viens de l' implémenter dans mon dév en ajoutant les cas perso dans le switch, j' utiliserais dorénavant cette classe vraiment géniale et vraiment très pratique dans les back-office.

10/10

@+
saturnino

Commentaire de tguerlus le 16/02/2005 16:39:56

Suite au modifification que je viens de mettre en ligne je vous suggère de regarder la grammaire détaillé pour avoir la liste exaustive de ce que l'on peut faire.

Commentaire de misterniark le 01/03/2005 18:58:22

bonsoir,
jai un soucie... quand je test un champs "obligatoire" il previent que ce champs est manquant mais laisse mon script s'executer quand meme, je vois pas comment empéché ca.
Merci

Commentaire de tguerlus le 02/03/2005 09:35:16

Peux-tu être plus précis pour que je puisse reproduire le bug ou alors envoie moi le code

A+

Commentaire de misterniark le 02/03/2005 12:47:57

voici le formulaire concerné(enfin juste un bout):
<FORM class="p2_form" name="produitForm" method="post" enctype="multipart-form-data"
           action="<?php echo $_SERVER['PHP_SELF']?> ">
<TABLE border=0>
<tr align="center"><h2><?php echo $produit->titre(); ?></h2></tr>
<TR>
   <TD class="label">Nom</TD>
   <TD><input size="40"  name="nom" type="text" size=20 maxlength=81 value="<?php echo  $produit->nom ; ?>" alt="nom :nom; obligatoire:true"></TD>
</TR>
<TD><input size="50"  TYPE=Submit name="go" value="<?php $produit->bouton(); ?>" onclick="javascript:Validator.Submit(document.produitForm,'test()');"></TD>

il medit que le champs est manquant mais execute ma fonction d'enregistrement du formulaire.
cela ne viens surement pas de ta source, mais si tu vois quel est le probleme ca me sauverai pas mal.
Merci

Commentaire de misterniark le 02/03/2005 12:48:16

voici le formulaire concerné(enfin juste un bout):
<FORM class="p2_form" name="produitForm" method="post" enctype="multipart-form-data"
           action="<?php echo $_SERVER['PHP_SELF']?> ">
<TABLE border=0>
<tr align="center"><h2><?php echo $produit->titre(); ?></h2></tr>
<TR>
   <TD class="label">Nom</TD>
   <TD><input size="40"  name="nom" type="text" size=20 maxlength=81 value="<?php echo  $produit->nom ; ?>" alt="nom :nom; obligatoire:true"></TD>
</TR>
<TD><input size="50"  TYPE=Submit name="go" value="<?php $produit->bouton(); ?>" onclick="javascript:Validator.Submit(document.produitForm,'test()');"></TD>

il medit que le champs est manquant mais execute ma fonction d'enregistrement du formulaire.
cela ne viens surement pas de ta source, mais si tu vois quel est le probleme ca me sauverai pas mal.
Merci

Commentaire de misterniark le 02/03/2005 12:53:16

en fait je pense quil faudrai que le fonction qui ce declenche quand je clique sur le bouton "ok" de la fenetre "alert" vide ma variable php $go car c'est elle qui declenche l'eregistrement. mais je ne sait pas du tout comment faire je connais tres peu le JS.
Merci a toi
Mathieu

Commentaire de tguerlus le 02/03/2005 13:56:54

Je pense que ton probleme vient du fait que tu utilise une balise input de type submit. Utilise simplement une balise input de type button avec l'evenement onclick comme tu l'as fait.

A+
TG

Commentaire de misterniark le 02/03/2005 16:20:43

le probleme de button c'est l'inverse, effectivement ca marche mais ma page ne recois plus le $_post donc plus d'enregistrement...
il me faudrai une solution intermediaire ;)
Mathieu

Commentaire de tguerlus le 03/03/2005 10:17:38

Qu'as tu mis dans la fonction test()?

Commentaire de johann1 le 26/08/2005 16:54:59

Super Tguerlus!

Commentaire de gonzamax le 20/12/2005 18:58:30

Super Tguerlus. Bravo pour ce code, c'est exactement ce qu'il me fallait.

Commentaire de cousinlol le 20/07/2006 14:55:06

Bonjour,

C'est vrai cela semble supper, mais quid pour les saisies dans des champs type "textarea" ou "select".

"alt" n'existe pas dans ces cas là.

Comment positionne-t-on le contrôle ?

Merci

Commentaire de antoinesyma le 29/09/2011 10:45:25

bonjour tguerlus j'utilise ton script de validation automatique de formulaire je cherche la valeur de alt pour autoriser seulement la saisie de texte disons les lettres alphabétique et les lettres accentuées sans les chiffres et les caractères non alphabétiques

Commentaire de antoinesyma le 29/09/2011 11:32:06

bonjour Tguerlus j'utilise ton script de validation automatique de formulaire je cherche la valeur de alt pour n'autoriser que la saisie de texte disons les lettres alphabétiques, les lettres accentuées, espace sans les chiffres et les caractères non alphabétiques. Merci

 Ajouter un commentaire




Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
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 : 0,234 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales