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
197
198
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
.contentErreur{
display: table-cell;
vertical-align: middle;
overflow:hidden;
position:absolute;
padding-left:5px;
}
.contentMessage{
border-top:2px solid #ab0303;
border-bottom:2px solid #ab0303;
border-right:2px solid #ab0303;
padding:5px;
font-style:italic;
font-weight:bold;
}
.contentOpacite{
position:absolute;
left:7px;
right:0px;
top:0px;
bottom:0px;
background-color:#ab0303;
opacity: 0.2;
-ms-filter: "alpha(opacity=20)"; /* IE 8 */
filter: alpha(opacity=20); /* IE 4-7 */
}
</style>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<input type"text" id="testInput" value="rien">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<textarea cols="40" rows="10" id="test"></textarea>
<script type="text/javascript">
var mForm = function () {
// variable privée
var name = "Robert";
//Méthode simple permettant de savoir si l'on est sous ie
var IsIE=!!document.all;
var lstFormat = {
numerique : { toTest : /(^-?\d\d*\.\d*$)|(^-?\d\d*$)|(^-?\.\d\d*$)/,message : "Ceci n'est pas un nombre"},
email : { toTest : /(^[a-z]([a-z_\.]*)@([a-z_\.]*)([.][a-z]{3})$)|(^[a-z]([a-z_\.]*)@([a-z_\.]*)(\.[a-z]{3})(\.[a-z]{2})*$)/i, message : "L'email n'est pas au bon format"}
};
/*
* Méthode permettant de trouver la position d'un élément
* obj : objet HTML
*/
var findPos = function(obj) {
if (obj) {
var curleft = 0;
var curtop = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft;
curtop = obj.offsetTop;
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
}
}
return [curleft, curtop];
}
};
/*
* Fonction de fadding permettant d'affiche un élément
* de façon progressive
*/
var fadding = function(elt,current,up){
elt.style.display = "block";
elt.opacite = current ;
elt.up = up ;
if (elt.opacite< 100 && elt.up){
elt.opacite+=3;
IsIE?elt.filters[0].opacity=elt.opacite:elt.style.opacity=elt.opacite/100;
elt.timer = setTimeout(function(){fadding(elt,elt.opacite,true)},25);
}
else{
clearTimeout(elt.timer);
elt.timer = null;
elt.up = false;
}
};
/*
* Fonction permettant de positionner le message d'erreur
* en fonction de l'objet passé en paramètre
*/
var positionne = function(champs,box){
var positionleft = parseInt(findPos(champs)[0])+ parseInt(champs.offsetWidth);
var positiontop = parseInt(findPos(champs)[1]) - ( parseInt(box.offsetHeight) / 2 - parseInt(champs.offsetHeight)/2);
box.style.position = "absolute";
box.style.top = positiontop+"px";
box.style.left = positionleft+"px";
};
var addEvent = function(func,onEvent,elementDom) {
if (window.addEventListener) {
elementDom.addEventListener(onEvent, func, false);
} else if (document.addEventListener) {
elementDom.addEventListener(onEvent, func, false);
} else if (window.attachEvent) {
elementDom.attachEvent("on"+onEvent, func);
}
};
var getFormatVerif = function(format){
switch(format){
case 'numerique':return lstFormat.numerique;
case 'email':return lstFormat.email;
}
};
var buildBox = function(message){
var content = document.createElement('div');
content.className = 'contentErreur';
var image = document.createElement('img');
image.src = "images/bgleft.gif";
image.style.position = 'absolute';
image.style.top ="50%";
image.style.marginTop = '-80px';
image.style.left = "0px";
var contentOpacite = document.createElement('div');
contentOpacite.className = 'contentOpacite';
var contentMessage = document.createElement('div');
contentMessage.className = 'contentMessage';
contentMessage.innerHTML = message;
content.appendChild(image);
content.appendChild(contentOpacite);
content.appendChild(contentMessage);
document.body.appendChild(content);
if(content.filters){
content.style.filter = 'alpha(opacity=0)';
}
return content;
};
/*
* Méthode permettant d'affecter la méthode de vérification sur le champs
*/
var init = function(parametres){
var champsVerif = parametres.champs;
var format = parametres.format;
var evenement = parametres.evenement;
format = getFormatVerif(format);
var box = buildBox(format.message);
positionne(champsVerif,box);
//La box doit être visible pour récupérer sa taille dans la fonction positione()
box.style.display = "none";
//Affectation de la méthode
addEvent(
function(champs,format,box){
return function(){
if(!format.toTest.test(champs.value)){
box.style.display = "block";
fadding(box,0,true);
}
else{
box.style.display = "none";
}
}
}(champsVerif,format,box),
evenement,
champsVerif
);
};
return {
verifChamps : function (parametres) {
init(parametres);
//return name;
},
getName : function(){
alert(name);
}
};
}();
var txtArea = document.getElementById('test');
var testInput = document.getElementById('testInput');
mForm.verifChamps({champs:testInput,format:'email',evenement:'blur'});
mForm.verifChamps({champs:txtArea,format:'numerique',evenement:'blur'});
</script>
</body>
</html> |
