Validation formulaire + onblur

**jaljal** · 25/10/2010, 17h48

Bonjour,

Je voudrais valider un formulaire avant le submit en mettant la fonction onblur dans chaque champ.

le problème c'est que lorsque je clique sur la tabulation pour passer d'un champ au suivant le focus se met sur le champ suivant avant l'action du onblur :

voila mon code :

validationForm.js :

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
 
// Author : Morsi , creation date : 22/10/2010
// From http://www.mattkruse.com/javascript/validations/
//============================= controleur ==================
 
function controleur(champ,controlType)
{
  var valeur=champ.value;
 
    if(controlType=='NUMBER')return verifMontant(valeur);
	if(controlType=='QUANTITY')return verifMontant(valeur);
	if(controlType=='INTEGER')return isInteger(valeur);	
    if(controlType=='BEFORE_SYS_DATE')return isBeforeSysdate(valeur);
    if(controlType=='DATE')return validateDate(valeur);
    if(controlType=='PERCENTAGE'){ return isPercentage(valeur); }
 
}
 
 
//============================= input Control ==================
function inputControl(champ, controlType)
{
    var valeur=champ.value;
 
 
    var isGood =  controleur(champ, controlType);
    if(isGood)
    {
       return true;
    }
    else
    {
 
     erreurMsg(controlType);
	 if(controlType=='QUANTITY') champ.value = "0";
	 //alert(champ.name);
		champ.focus();
 
	return false;
    }
}
//============================= récupération du message d'erreur ==================
function erreurMsg(codeMsg)
{
  var message=getErrorMsg(codeMsg);
  	alert(message);
}
//============================= affectation du message d'erreur ==================
function getErrorMsg(type)
{
var message='';
if(type=='DATE'){message='Date saisie erronée';}
else if(type=='BEFORE_SYS_DATE'){message='Date non valide';}
else if(type=='AFTER_SYS_DATE'){message='Date non valide';}
else if(type=='PERCENTAGE'){message='Pourcentage non valide';}
else if(type=='NUMBER'){message='Montant non valide';}
else if(type=='FORM_RRQUIRED'){message='Champ obligatoire non remplie';}
else if(type=='INTEGER'){message='Nombre non valide';}
 
else{message='Valeur saisie non valide';}
 
return message;
}
 
function compareDate(date_1, date_2)
{
  diff = date_1.getTime()-date_2.getTime();
   return (diff==0?diff:diff/Math.abs(diff));
}
function validateDate(strDate)
{
 
	//Added by Morsi 
	// dd/mm/yyyy
	   var result = true;
	var dateRegExp = /^(\d{2}\/){2}\d{4}$/;
	if (!strDate.match(dateRegExp))
	   {result=false; }
    var MIN_YEAR=1900;
    var regex = new RegExp("[/]");
    var date = strDate.split(regex);
    var nbJours = new Array('',31,28,31,30,31,30,31,31,30,31,30,31);
 
 
    if ( date['2'] < MIN_YEAR)
    result=false;
 
    if ( date['2']%4 == 0 && date['2']%100 > 0 || date['2']%400 == 0 )
    nbJours['2'] = 29;
 
    if( isNaN(date['2']) )
    result=false;
 
    if ( isNaN(date['1']) || date['1'] > 12 || 1 > date['1'] )
    result=false;
 
    if ( isNaN(date['0']) || date['0'] > nbJours[Math.round(date['1'])] || 1 > date['0'] )
    result=false;
 
    return result;
}
 
function isBeforeSysdate(strDate)
{
 
    if(validateDate(strDate))
    {
		day = strDate.substring(0,2);
		month = strDate.substring(3,5);
		year = strDate.substring(6,10);
		d = new Date();
		d.setFullYear(year);
		d.setMonth(month-1);
		d.setDate(day); 
	  if(compareDate(new Date(),d)!=1) return false;
		else { return true;  }
    }
    else{ return false;  }
}
 
 
 
 
function verifMontant(valeur){
	//float et non vide
	return(parseFloat(valeur,10)==(valeur*1));
 
}
 
function isPercentage(valeur){
	//float et encadrer entre 0 et 100
return((parseFloat(valeur,10)==(valeur*1)) && (valeur<=100) && (valeur>=0) );
 
 
 
}
 
//-------------------------------------------------------------------
// isDigit(value)
//   Returns true if value is a 1-character digit
//-------------------------------------------------------------------
function isDigit(num) {
	if (num.length>1){return false;}
	var string="1234567890";
	if (string.indexOf(num)!=-1){return true;}
	return false;
	}
 
 
 
// isBlank(value)
//   Returns true if value only contains spaces
//-------------------------------------------------------------------
function isBlank(val){
	if(val==null){return true;}
	for(var i=0;i<val.length;i++) {
		if ((val.charAt(i)!=' ')&&(val.charAt(i)!="\t")&&(val.charAt(i)!="\n")&&(val.charAt(i)!="\r")){return false;}
		}
	return true;
	}
 
 
 
//-------------------------------------------------------------------
// isInteger(value)
//   Returns true if value contains all digits
//-------------------------------------------------------------------
function isInteger(val){
	if (isBlank(val)){return false;}
	for(var i=0;i<val.length;i++){
		if(!isDigit(val.charAt(i))){return false;}
		}
	return true;
	}

test.html :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Test Validation</title>
<script type="text/javascript" src="validationForm.js"></script>
<style type="text/css">
body{	background:#ececec;}
 
form.formular {
	font-family: tahoma, verdana, "sans-serif";
	font-size: 12px;
	padding: 20px;
	border: 1px solid #A5A8B8;
 
	width:300px;
	margin-left:30px;
}
 
.formular fieldset {
	margin-top: 20px;
	padding : 15px;
	border: 1px solid #B5B8C8;
 
}
 
.formular legend {
	font-size: 12px;
	color: #15428B;
	font-weight: 900;
}
 
.formular fieldset label {
	float: none;
	text-align: inherit;
	width: auto;
}
 
.formular label span {
	color: #000;
}
 
.formular input, .formular select, .formular textarea {
	display : block;
	margin-bottom: 5px;
}
 
.formular .text-input {
	width: 250px;
	color: #555;
	padding: 4px;
	border: 1px solid #B5B8C8;
	font-size: 14px;
	margin-top: 4px;
	background: #FFF url('/img/form/text-bg.gif') repeat-x;
 
}
.formular textarea {
	width: 250px;
	height:70px;
	color: #555;
	padding: 4px;
	border: 1px solid #B5B8C8;
	font-size: 14px;
	margin-top: 4px;
	background: #FFF url('/img/form/text-bg.gif') repeat-x;
 
}
.formular .infos {
	background: #FFF;
	color: #333;
	font-size: 12px;
	padding: 10px;
	margin-bottom: 10px;
}
 
.formular span.checkbox, .formular .checkbox {
	display: inline;
}
 
.formular .submit {
	background: url('/img/form/button-bg.png') repeat-x;
	border: 1px solid #AAA;
	padding: 4px;
	margin-top: 20px;
	float: right;
	text-decoration: none;
	cursor:pointer;
}
 
.formular hr {
	clear: both;
	visibility: hidden;
}
 
.formular .fc-error {
	width: 350px;
	color: 555;
	padding: 4px;
	border: 1px solid #B5B8C8;
	font-size: 12px;
	margin-bottom: 15px;
	background: #FFEAEA;
}
</style>
</head>
 
<body>
 
<form>
 
</form>
 
<h2>Formulaire de Test :</h2>
<form id="formID" name="formID"  class="formular" method="post" action="">
			<fieldset>
				<legend>Informations</legend>
 
				<label>
					<span>date : format (jj/mm/aaaa) </span>
					<input name="date" type="text" onblur="inputControl(this,'BEFORE_SYS_DATE');"/>
				</label>
				<label>
					<span>Montant : </span>
					<input name="montant" type="text" onblur="inputControl(this,'NUMBER');"/>
				</label>
				<label>
					<span>Pourcentage (%): </span>
					<input name="pourcentage" type="text" onblur="inputControl(this,'PERCENTAGE');"/>
				</label>
				<label>
					<span>Entier non null: </span>
					<input name="nbrePos" type="text" onblur="inputControl(this,'INTEGER');"/>
				</label>
				<label>
					<span>Quantitée: </span>
					<input name="quantity" type="text" onblur="inputControl(this,'QUANTITY');"/>
				</label>
 
			</fieldset>
 
 
<input class="submit" type="submit" value="Envoyer"/>
<hr/>
</form>
 
</body>
</html>

Comment résoudre mon problème ?

Merci

**Watilin** · 25/10/2010, 18h26

Pour moi il n'y a pas de problème, mis à part l'ergonomie…

**jaljal** · 25/10/2010, 19h05

le problème se situe au focus, c'est à dire le champ.focus() ne ramène pas le curseur au même champ non valide ...

**Watilin** · 25/10/2010, 19h12

Bah chez moi si, avec Firefox/Linux. Mais j'ai trouvé ça agaçant, ce qui dénote un problème d'ergonomie. Il vaudrait mieux que tu fasses apparaître un message à côté du champ invalide (et pas un alert) mais que tu permettes quand même de passer au champ suivant.
Le plus pénible c'est que tu ne peux plus changer de page ni la fermer…