Vérification d'un formulaire en temps réel

Soyez le premier à donner votre avis sur cette source.

Snippet vu 10 469 fois - Téléchargée 27 fois

Contenu du snippet

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 / Exemple :


<!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)

A voir également

Ajouter un commentaire

Commentaires

Messages postés
275
Date d'inscription
samedi 4 juin 2005
Statut
Membre
Dernière intervention
28 avril 2006
5
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>

Presser une touche

</html>
Messages postés
1
Date d'inscription
lundi 10 janvier 2005
Statut
Membre
Dernière intervention
24 janvier 2006

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... ?
Messages postés
4
Date d'inscription
lundi 12 septembre 2005
Statut
Membre
Dernière intervention
12 septembre 2005

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 !

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.