begin process at 2012 05 28 11:47:10
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Trucs & Astuces

 > VÉRIFICATION D'UN FORMULAIRE EN TEMPS RÉEL

VÉRIFICATION D'UN FORMULAIRE EN TEMPS RÉEL


 Information sur la source

Note :
7,5 / 10 - par 4 personnes
7,50 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Trucs & Astuces Classé sous :formulaire, event Niveau :Initié Date de création :11/09/2005 Date de mise à jour :11/09/2005 11:45:54 Vu :8 401
Auteur : Phil_Free

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

 Description

Cliquez pour voir la capture en taille normale
Il ne s'agit pas à proprement parlé d'une source, mais d'un exemple d'utilisation de l'objet event.

Dans vos formulaires, il se trouve toujours des caractères interdits, plutôt que de laisser l'internaute remplir un formulaire jusqu'au bout et de lui indiquer ensuite:

Désolé, mais votre réponse dans les champs 1,2,3,4,.. contient des erreurs, veuillez recommencer la saisie !

Pourquoi ne pas le contraindre à n'utiliser que certains caractères ?

Ce petit script utilise l'objet event et les expressions régulières.

Il fonctionne sous IE, Netscape et FireFox. (pas testé les autres)

Dans cet exemple, les seuls caractères autorisés sont les chiffres, l'alphabet majuscule et les touches spéciales Enter, flèches, Backspace.
Libre à vous de créer d'autres expressions régulières autorisant d'autre caractères.

Source

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  • <html>
  • <head>
  • <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  • <title>Clavier Alphanumérique</title>
  • <style type="text/css">
  • body{
  • background-color: #101010 ;
  • }
  • </style>
  • </head>
  • <body>
  • <p align="center"> <!-- centrage du clavier -->
  • <script type="text/javascript">
  • <!--
  • // utilisation de l'objet event pour gérer les saisies clavier
  • // permet de contrôler caractère par caractère la saisie d'un formulaire
  • // ---------------------------------------------------------------------
  • function codeTouche(evenmt) { // retourne le code de la touche pressée
  • for (propty in evenmt) {
  • if(propty == 'which') return(evenmt.which); // cas Netscape-FireFox
  • }
  • return(evenmt.keyCode); // cas IE
  • }
  • function scanTouche(evenmt) { // autorise les touches définies dans les expressions régulières ci-dessous
  • var regCarSpec = /[\x00\x08\x0D]/; // expression régulière autorise les caractères Home End Flèches Backspace Enter
  • var regCarVal = /[0-9 A-Z]/; // expression régulière autorise chiffres et majuscules
  • var codeDecimal = codeTouche(evenmt);
  • var car = String.fromCharCode(codeDecimal);
  • var authorization = regCarVal.test(car) || regCarSpec.test(car); // Test si touche pressée est valide
  • return authorization;
  • }
  • // ------------------------ Fin de la méthode originale de contrôle ------------
  • // ------------ Affichage des touches autorisées et de la textarea -------------
  • function pressTouche(valeur){
  • document.getElementById("text2display").value += valeur;
  • }
  • // définition du clavier US
  • keys = new Array( "1","2","3","4","5","6","7","8","9","0",
  • "Q","W","E","R","T","Y","U","I","O","P",
  • "A","S","D","F","G","H","J","K","L",
  • "Z","X","C","V","B","N","M");
  • c = keys.length; // nombre de touches du clavier
  • message = "\n\n\n\ Ne soyez pas surpris si certaines\n touches de votre clavier\n ne fonctionnent pas.\nC'est fait exprès !\n\n"
  • // création du clavier
  • document.write("<form>\n");
  • document.write("<textarea rows=\"10\" cols=\"36\" name=\"text2display\" id=\"text2display\" onKeyPress=\"return scanTouche(event)\" style=\"background-color:#C0C0C0;\"></textarea><br>");
  • document.getElementById("text2display").value = message; // affichage message anti-panique
  • document.getElementById("text2display").focus(); // passage du focus à textarea
  • for( i=0 ; i<c ;i++) {
  • document.write("<input type=\"button\" value=\"" + keys[i] +"\" style=\"width:25px;background-color:black;color:white;\" onclick=\"pressTouche('" + keys[i] + "')\">\n");
  • switch (i) {
  • case 9:
  • document.write("<br> ");
  • break;
  • case 19:
  • document.write("<br> ");
  • break;
  • case 28:
  • document.write("<br> ");
  • }
  • }
  • document.write("</form>");
  • //-->
  • </script>
  • </p>
  • </body>
  • </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
	<title>Clavier Alphanumérique</title>
<style type="text/css">
body{
	background-color: #101010 ;
}
</style>
</head>

<body>
<p align="center"> <!-- centrage du clavier -->
<script type="text/javascript">
<!--
// utilisation de l'objet event pour gérer les saisies clavier
// permet de contrôler caractère par caractère la saisie d'un formulaire
// ---------------------------------------------------------------------
function codeTouche(evenmt) {	// retourne le code de la touche pressée

	for (propty in evenmt) {
		if(propty == 'which') return(evenmt.which);	// cas Netscape-FireFox
	}
	return(evenmt.keyCode);							// cas IE
}

function scanTouche(evenmt) {	// autorise les touches définies dans les expressions régulières ci-dessous

    var regCarSpec = /[\x00\x08\x0D]/;	// expression régulière autorise les caractères Home End Flèches Backspace Enter
	var regCarVal  = /[0-9 A-Z]/;		// expression régulière autorise chiffres et majuscules

	var codeDecimal  = codeTouche(evenmt);
	var car = String.fromCharCode(codeDecimal);
	var authorization = regCarVal.test(car) || regCarSpec.test(car); // Test si touche pressée est valide

	return authorization;
}
// ------------------------ Fin de la méthode originale de contrôle ------------

// ------------ Affichage des touches autorisées et de la textarea -------------
function pressTouche(valeur){
	document.getElementById("text2display").value += valeur;
}

// définition du clavier US
keys = 	new Array(  "1","2","3","4","5","6","7","8","9","0",
					"Q","W","E","R","T","Y","U","I","O","P",
					"A","S","D","F","G","H","J","K","L",
					"Z","X","C","V","B","N","M");
c = keys.length; 	// nombre de touches du clavier
message = "\n\n\n\ Ne soyez pas surpris si certaines\n     touches de votre clavier\n       ne fonctionnent pas.\nC'est fait exprès !\n\n"

// création du clavier

document.write("<form>\n");
document.write("<textarea rows=\"10\" cols=\"36\" name=\"text2display\" id=\"text2display\" onKeyPress=\"return scanTouche(event)\" style=\"background-color:#C0C0C0;\"></textarea><br>");
document.getElementById("text2display").value = message;	// affichage message anti-panique
document.getElementById("text2display").focus();			// passage du focus à textarea
for( i=0 ; i<c ;i++) {
	document.write("<input type=\"button\" value=\"" + keys[i] +"\" style=\"width:25px;background-color:black;color:white;\" onclick=\"pressTouche('" + keys[i] + "')\">\n");
	switch (i) {
		case 9:
		document.write("<br> ");
		break;
		case 19:
		document.write("<br>  ");
		break;
		case 28:
		document.write("<br>   ");	
	}	
}
document.write("</form>");


//-->
</script>
</p>
</body>

</html>

 Conclusion

Internet Explorer et Netscape-Firefox reconnaissent le code des touches en utilisant des propriétés différentes:
- keyCode pour IE et
- which pour Netscape-FireFox.

Vous pourrez voir ceci dans la fonction codeTouche.

Concernant les "expressions régulières", je vous recommande cette page http://aidejavascript.com/rubrique23.html

Le clavier affiché dans cet exemple est un clavier US (il est bien plus universel que le clavier français)

La saisie dans cet exemple peut se faire via le clavier virtuel ou via votre propre clavier.

Le clavier virtuel indique à l'internaute les caractères autorisés.

Dans le champ du formulaire à contrôler on utilise onKeyPress, c'est ici qu'intervient l'objet event.

Dans cet exemple le formulaire est généré par JavaScript, ce n'est pas nécessaire pour utiliser cette méthode, mais c'est plus rapide que d'écrire tout le code HTML. (vive la paresse)


 Historique

11 septembre 2005 10:56:42 :
Petite correction de mise en page source.
11 septembre 2005 11:05:41 :
Ajout de 2 commentaires dans l'explication finale.
11 septembre 2005 11:45:55 :
Ajout d'un détail dans annotation finale

 Sources du même auteur

UNE PETITE IMAGE VAUT MIEUX QU'UN LONG DISCOUR
Source avec une capture MENU DYNAMIQUE VERTICAL PARAMÉTRABLE
Toutes les sources de Phil_Free

 Sources de la même categorie

PARSER LES CARACTÈRES HTML D'UNE STRING par jdmcreator
CONSTRUCTION D'UNE TABLE TRIABLE À PARTIR D'UN TABLEAU 2D par phm
Source avec Zip Source avec une capture SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp
Source avec Zip TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator
Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol
Toutes les sources de la catégorie Trucs & Astuces

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture FORMULAIRE TABLEAU par vic511
Source avec Zip Source avec une capture FORMULAIRE DYNAMIQUE par Niidhogg
Source avec une capture FORMULAIRE D'INSCRIPTION+VÉRIFICATION par ellissss
Source avec Zip SYSTÈME D'UPLOAD DE FICHIER SANS RECHARGEMENT DE LA PAGE. par theptitprince
Source avec Zip Source avec une capture SCROLL BARS EN JAVASCRIPT SUR UNE PAGE HTML par Glennouchet

Commentaires et avis

Commentaire de pdelage le 12/09/2005 13:45:37

Méthode intéressante, je ne connaissais pas.
Bravo pour les explications, les commentaires et la clareté du code.
Je vais de ce pas intégrer l'objet event à mes formulaires.

Merci pour l'astuce !

Commentaire de ganjaman452000 le 24/01/2006 17:10:15

je pense qu'il peut etre sympa de préciser la source des codes que l'on recopie avant d'espérer glaner les louanges pour le développement de script....

sinon fonction excellent personne ne sait comment capter avec précision les codes des touches F1, F2 etc... ?

Commentaire de Phil_Free le 31/03/2006 00:53:35

Salut Ganjaman,

Pour capturer le code des touches de fonction, il te suffit de t'inspirer de mon code ci-dessus, par exemple:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>test du code des touches du clavier</title>
  <script language=javascript>
  function codetouche(evenmt){
    alert(evenmt.keyCode)
  }
</script>
</head>  
  <body onKeyDown="javascript:codetouche(event);">
    Presser une touche
  </body>
</html>

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Comment activer l'event handler d'un champ texte (formulaire)? [ par Simbabbad ] Bonjour, j'essaie de mettre en place bénévolement pour un forum auquel je participe un moyen pratique de changer la couleur de police et la couleur d compter le nombre des zone de texte qui ont été rempli [ par elorrios ] SVP je suis debutant en javascript ,j'aime bien determiner le nombre des zone rempli !=0 pour retourne le nombre de jour travailler SVP aider moi . Faire un système de formulaire dynamique [ par Toledano33 ] Bonjours a tous! je suis actuellement entrain de créer un site et j'ai un soucis au niveau de mon back office...c'est pas vraiment un soucis mais je n Envoyer et récupérer un champ texte de formulaire entre une page Web et fichier XML? [ par alain8225 ] Salut à tous, J'ai créé une page Web dans laquelle j'ai placé un formulaire contenant des champs TEXT. L'utilisateur entre ses données qui sont enreg 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 Afficher un message d'alerte si le formulaire est modifié mais pas validé [ par gigraphe ] Bonjour à tous je cherche une solution pour tester : 1- Si le formulaire a été modifié mais pas validé (depuis le chargement de la page ou la derniè probleme avec mon code source en javascript [ par osken2017 ] Bonsoir voici mon code source qui doit normalement afficher un CV en html apres avoir fini de remplir le formulaire qu'il contient. Cependant je renco Valider un formulaire avec un href [ par marjoBZH ] Bonjour, voici mon code développez en PHP : while($lig=mysql_fetch_row($res)) { echo(""); echo("$lig[2]"); echo(""); echo("<form name='courses' me problème avec balise tag [ par bumbo ] Bonjour a tous, J'ai un petit soucis de compatibilité avec firefox, je m'explique: Soit une image dans une page html avec un tag: [code=html] [/cod Prototype: problème avec "event" [ par bumbo ] Bonjour, J'ai un problème avec le code suivant: [code=js] var myArray = $('body').getElementsBySelector('[infobulle]'); myArray.each(function(


Nos sponsors


Sondage...

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 : 4,805 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)