Discussion :

[olive57GT]

Bonjour à tous.

Voilà mon pbm :
Comme surement bcp de developpeurs, j'ai besoin d'implementer un formulaire dans lequel je dois verifier que le contenu de la saisie utilisateur est conforme à une expression reguliere. Plus precisement, je dois pouvoir verifier en cours de frappe si la valeur de l'input est conforme à une expression reguliere.

Je pense que je dois pas etre le seul a avoir ce pbm !! Bref, j'ai lu pas mal de docs à droite et a gauche et aujourdhui tout est confus dans ma tete.

Je me suis focalisé sur l'evenement onkeypress. J'ai constaté que sur cet evenement on peut recuperer le caractere saisi (cool) mais qu'on ne peut pas savoir à quelle position ce caractere est inséré (en tout cas j'ai pas trouvé). Savez vous si c'est possible ou pas de recuperer cette info ? Si on peut savoir ca, je pense que je vais pouvoir m'en servir pour empecher que le caractere soit inseré dans l'input en renvoyant false sur le onkeypress.

De plus, en cas de copier/coller, suppression, etc ... comment verifier que le contenu de l'input est encore conforme a l'expression reguliere ? Avec l'evenement onkeyup ? Du coup ne peut-on pas annuler automatiquement le copier/coller ?

Bref, si vous avez des reponses a ces questions angoissantes je suis preneur. Si vous connaissez des liens qui resument l'etat de l'art sur cette problematique de controle/validation du contenu des inputs, je suis aussi preneur.

Merci !

[bigboomshakala]

salut,

je t'avouerais que je n'ai pas trop le temps d'expliquer (boulot boulot). je te mets là ce que j'ai sur un keypress pour valider un nombre dans un input

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
function keypressNum()
{
	try
	{
		var c = event.keyCode;
		var t = event.srcElement;
		t.keyCode = c;
 
		var pstart = getSelectionStart(t);
		var pend = getSelectionEnd(t);
		var new_value = t.value.substring(0,pstart) + String.fromCharCode(c) + t.value.substring(pend);
 
		var mask = '^[\-]{0,1}[0-9]{0,}[.]{0,1}[0-9]{0,1}$';
		var reg = new RegExp(mask,"g");
    if(!reg.test(new_value))
      event.returnValue = false;
	}
	catch(ex){TraceError(ex,"keypressNum");}
}
 
/******************************************************************/
//	getSelectionStart
//  renvoie la position de début de la sélection dans une zone
//  de texte (input, textarea)
/******************************************************************/
function getSelectionStart(o)
{
	if ( typeof o.selectionStart != 'undefined' )
		return o.selectionStart;
 
	// IE Support
	o.focus();
	var range = o.createTextRange();
	range.moveToBookmark(document.selection.createRange().getBookmark());
	range.moveEnd('character', o.value.length);
	return o.value.length - range.text.length;
}
/******************************************************************/
//	getSelectionEnd
//  renvoie la position de fin de la sélection dans une zone
//  de texte (input, textarea)
/******************************************************************/
function getSelectionEnd(o)
{
	if ( typeof o.selectionEnd != 'undefined' )
		return o.selectionEnd;
 
	// IE Support
	o.focus();
	var range = o.createTextRange();
	range.moveToBookmark(document.selection.createRange().getBookmark());
	range.moveStart('character', - o.value.length);
	return range.text.length;
}

[olive57GT]

Merci bigboomshakala !! J'ai testé rapidement et ca repond tout a fait a mes attentes !
Je pense que je vais devoir l'adapter un peu pour qu'il fonctionne sous FF (enfin si c'est possible of course) mais en tout cas toute l'idee est dans les methodes getSelectionStart et getSelectionEnd.
Encore merci d'avoir partagé ca.

Je passerai le thread en [resolu] qd j'aurai fini les modifs et que je les mettrai a disposition !!

A+

[olive57GT]

Hi guys !!

Alors voila ce que ca donne au final. Ca marche sous IE et FF.
Encore merci a bigboomshakala !

HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<input type='text' id='PGId_PModel' onkeypress="return checkInput(event, PGId_PModelRegxpInput, PGId_PModelHelpText);" MAXLENGTH='3' style='text-transform:uppercase;' tabindex='0' class='textinput input-mandatory' value="DEP" name='PGId_PModel'/>

JAVASCRIPT :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
 
function checkInput(e, regExpValue, errorMessageID) {
	var event;
	var target;
	var key;
	var keychar;
 
	if (window.event) { 
		event = window.event;
		key = window.event.keyCode;
		target = event.srcElement;
	}
	else if (e) {
		event = e;
		key = event.which;
		target = event.target;
	}
	else return true;
 
	var keychar = String.fromCharCode(key);
	var pstart = getSelectionStart(target);
	var pend = getSelectionEnd(target);
	var n_value = target.value.substring(0,pstart) + keychar + target.value.substring(pend);
 
	var regExp = new RegExp(regExpValue, "g");
	// control keys
	if ((key==null) || (key==0) || (key==8) ||
	    (key==9) || (key==13) || (key==27) )
	   return true;
 
	else {
		var matchRepExp = regExp.test(n_value);
		if (matchRepExp) {
			var parent = target.parentNode;
			if (parent.childNodes[10]) parent.removeChild(parent.childNodes[10]);			
			if (parent.childNodes[9]) parent.removeChild(parent.childNodes[9]);			
			if (parent.childNodes[8]) parent.removeChild(parent.childNodes[8]);						
			if (parent.childNodes[7]) parent.removeChild(parent.childNodes[7]);
		} else {
 
			var parent = target.parentNode;
			if (!parent.childNodes[7]) {
				var b = document.createTextNode(" ");
				parent.appendChild(b);
				var font = document.createElement("font");
				attr1 = document.createAttribute("color");
				attr1.nodeValue = "red";
				font.setAttributeNode(attr1);
				var txtx = document.createTextNode(errorMessageID);
				font.appendChild(txtx);
				parent.appendChild(font);	
			}		
		}
		return true;
	}
}
 
/******************************************************************/
//	getSelectionStart
//  renvoie la position de début de la sélection dans une zone
//  de texte (input, textarea)
/******************************************************************/
function getSelectionStart(o)
{
	if ( typeof o.selectionStart != 'undefined' )
		return o.selectionStart;
 
	// IE And FF Support
	o.focus();
	var range = o.createTextRange();
	range.moveToBookmark(document.selection.createRange().getBookmark());
	range.moveEnd('character', o.value.length);
	return o.value.length - range.text.length;
}
/******************************************************************/
//	getSelectionEnd
//  renvoie la position de fin de la sélection dans une zone
//  de texte (input, textarea)
/******************************************************************/
function getSelectionEnd(o)
{
	if ( typeof o.selectionEnd != 'undefined' )
		return o.selectionEnd;
 
	// IE And FF Support
	o.focus();
	var range = o.createTextRange();
	range.moveToBookmark(document.selection.createRange().getBookmark());
	range.moveStart('character', - o.value.length);
	return range.text.length;
}

[lalchimiste111]

Bonjour ! (solution alternative)

Je voulais réaliser le même type de fonctionnalité, j'ai commencé avec le même style d'approche que vous (récupération des entrées clavier), puis je me suis dit que ce serait beaucoup simple de récupérer l'input de l'utilisateur APRES que le résultat de son action soit effectué, plutôt qu'intercepter l'évènement et magouiller.
Comme ça me parait impossible sans threads, je checke toutes les 1/2 seconde lorsque l'utilisateur a le focus sur l'input. Comme la validation est susceptible de consommer des ressources, on ne la fait pas si l'input n'a pas été modifié.

Javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
var monEmail =""; // email en cache
 
function startValidEmail() { // si l'utilisateur entre dans la zone de texte on déclenche l'appel régulier à isACorrectEmail
	rythm = setInterval(isACorrectEmail,delay);
}
function stopValidEmail() { // si l'utilisateur en sort
	clearInterval(rythm);
}
 
function isACorrectEmail() {
	if (monEmail == elem(email).value) // recuperation de l'input
		return false; // pas de calcul si rien de s'est passé
	monEmail = elem(email).value;
        // ... validation de l'email
}

Html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input id="email" type="text" name="email" size="25" onfocus="startValidEmail(); return false;" onblur="stopValidEmail(); isACorrectEmail(); return false;"/>

[darkloy]

Salut, même principe, j'ai essayer de garder le comportement de Firefox sous IE.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
 
<html>
	<head>
		<title>Tester la valeur numérique</title>
		<script type="text/javascript">
			/**
			*  fonction qui bloque l'écriture d'un champ si l'utilisateur
			*  n'as pas appuyé sur une touche autorisée
			*
			*  doit être utilisé de la manière suivante :
			*  onkeypress="return testNum(event,this,2);"
			*
			*	@param number d = nombre de décimaux après la virgule
			*/
 
			function testNum(e,t,d){
 
				//on crée le tableau des touches autorisées
				var toucheOk =
				new Array (
				37, //<-
				39, //->
				44,	//,
				46,	//.
				48,	//0
				49,	//1
				50,	//2
				51,	//3
				52,	//4
				53,	//5
				54,	//6
				55,	//7
				56,	//8
				57,	//9
				8		//<--
				);
 
				//Fonction qui renvoie true si le tableau Arr contient Val
				function in_array(Arr,Val) {
					for(i=0;i < Arr.length;i++)
					{
						if(Arr[i] == Val)
						return true;
					}
					return false;
				}
				//On remplace les virgules par des points
				t.value = t.value.replace(',','.');
				//En fonction du naviguateur, on assigne la valeur de la touche
				if(e.keyCode == 0)//FIREFOX...
				{
					var key = e.which;
					var firefox = true;
				}
				else//IE....
					{
						var key = e.keyCode;
						var ie = true;
					}
 
					//On va rechercher si deux points consécutifs ont été utilisés
					var longChar = t.value.length;
					var lastChar = t.value.charAt(longChar-1);//On récupère le dernier char
					if ((lastChar == '.')&&((key == 46)||(key == 44))) var point = true ;
 
 
					// Detection du curseur
 
					if(ie == true)//On est sous IE
					{
						function getSelection(objIE)
						{
							if (objIE.setSelectionRange)
								return objIE.value.substring(objIE.selectionStart, objIE.selectionEnd);
							else if (document.selection) {
								objIE.focus();
								return document.selection.createRange().text;
							}
						}
 
						function getSelectionStart(o)
						{
							if ( typeof o.selectionStart != 'undefined' )
								return o.selectionStart;
 
							// IE Support
							o.focus();
							var range = o.createTextRange();
							range.moveToBookmark(document.selection.createRange().getBookmark());
							range.moveEnd('character', o.value.length);
							return o.value.length - range.text.length;
						}
 
 
						function getSelectionEnd(objIE) {
							if(typeof objIE.selectionStart != 'undefined') {
								return objIE.selectionStart;
							}
							objIE.focus();
							var range = objIE.createTextRange();
							range.moveToBookmark(document.selection.createRange().getBookmark());
							range.moveStart('character',-objIE.value.length);
							return range.text.length;
						}
 
						function replaceSelection(objIE,str, keep)
						{
							objIE.focus();
 
							var start = objIE.getSelectionStart();
							var stop = objIE.getSelectionEnd();
							var end = start + str.length;
							var scrollPos = objIE.scrollTop;
 
							objIE.value = objIE.value.substring(0, start) + str + objIE.value.substring(stop);
							if ( keep ) objIE.setCaretPos(start, end);
							else objIE.setCaretPos(end);
								objIE.scrollTop = scrollPos;
							}
 
 
 
							var cursStart = getSelectionStart(t);
							var cursEnd		=	getSelectionEnd(t);
 
 
						}
 
						if(firefox == true)//on est sous firefox
						{
							var cursStart = t.selectionStart;
							var cursEnd		=	t.selectionEnd;
						}
 
 
						//Contrôles :
						if(d)
						{
							//On va chercher la position du '.'
							var posPoint = t.value.lastIndexOf('.');
							if(posPoint != -1)
							{
								var lgaftP = t.value.substring(posPoint, longChar);
								var longP = lgaftP.length ;
							}
 
							//Si la valeur est plus importante que 'd' et que
							//le curseur est après le point
							if((longP > d)&&(key != 8)&&(cursStart > (posPoint)))
							var maxDec = true;//On bloque
							else
								var maxDec = false;
							}
							//si on sélectionne avec la souris un chiffre ou plusieurs
							if(cursStart < cursEnd)
							{
								maxDec = false;
							}
							//On autorise les fleches
							if((key == 37)||(key == 39))
							maxDec = false;
 
							//On compte le nombre de points
							var nbrPoint = 0;
							for(i=0;i < t.value.length;i++)//On parcours la valeur
							{
								if(t.value.charAt(i) == '.')
								//On incrémente
								nbrPoint++;
							}
 
							if((nbrPoint == 1)&&((key ==44)||(key ==46)))maxDec = true;
 
							//On teste les clefs ASCII utilisées et les conditions
							if ((!in_array(toucheOk,key))||(point == true)||(maxDec == true))
							{
								if(e.which == 0) e.returnValue = false;
								return false;
							}
							else return true;
 
 
 
							}
 
 
						</script>
					</head>
					<body>
						<div align='center' style='margin-top:100px;'>
							<h4>Tester la saisie clavier en javascript avec les clés ASCII </h4>
							<input type='text' id='field' onkeypress="return testNum(event,this,2);" />
							<input type='button' value='initialiser' onclick="document.getElementById('field').value ='';" />
						</div>
					</body>
				</html>