Classe JS array de callback | portée du this
Bonjour à tous.
Je suis actuellement en train de développer un validateur de champ de formulaire en javascript.
J'ai donc créé une classe javascript avec des prototypes. La classe fonctionne en parsant le dom et en découpant la classe de chaque input de manière à executer la bonne callback associé au type à tester.
Mon problème est que dans l'appel de la callback dans mon tableau de callback, la methode une fois executée n'a plus accès aux autres prototypes (comme le fait en objet une methode utilisant une autre methode).
En effet, le this dans la callback appelée pointe vers le array, et non vers l'instance de Validator. J'ai tenté un this.parent pour remonter jusqu'a l'instance mais ce fut sans résultats.
Auriez-vous des idées pour m'aiguiller ? Je préfèrerais éviter d'utiliser un switch dans ma methode validator pour que l'ajout de nouvelles règles se fasse facilement.
Code:
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
| /**
* Classe Validator
* Permet de valider les champs d'un formulaire
* @returns {Validator}
*/
var Validator = function()
{
this.elementsError = new Array();
this.emptyFields = new Array();
/**
* Liste des types de données
* @type array
*/
this.types = new Array('string',
'phone',
'email',
'number',
'file');
/**
* Liste des callback associés aux types de données
* @type type
*/
this.callback = {"string": this.checkString ,
"phone":this.checkTel,
"email":this.checkEmail,
"number":this.checkNumber,
"file":this.checkFile};
/**
* Liste des actions
* @type type
*/
this.actions = {"or": this.OneOrOthers};
};
/**
* Methode qui ajoute une bordure au champ
* @param {type} element
*/
Validator.prototype.addBorder = function(element)
{
element.style.border= "1px solid red";
};
/**
* Methode qui enlève la bordure du champ
* @param {type} element
*/
Validator.prototype.removeBorder = function(element)
{
element.style.border="1px inset white";
};
/**
* Fonction de validation
* @returns {undefined}
*/
Validator.prototype.validate = function()
{
// .... Boucle
elements = ('input[class^='+this.types[i]+']');
// ...
this.callback[this.types[i]](elements[j],ENom);
// ... fin de boucles
}
// fonction qui vérifie si un input ne contient pas de caractères speciaux
Validator.prototype.checkString = function (element,name)
{
console.log("checkString"+name);
if(0 < element.value.length)
{
var regEx=/^[\w\s-]*$/;
if(!regEx.test(element.value))
{
this.elementsError.push("Le champ "+name+" ne doit pas contenir de caractères speciaux"); // ici la methode ne trouve pas le tableau elementsError
}else
{
this.removeBorder(element); // ici la methode ne trouve pas la methode removeBorder
}
}
}; |
