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

Commenter

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

S'inscrire maintenant

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.

Du même auteur (Phil_Free)