Discussion :

[titus23]

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 :

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
/**
 * 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
            }
        }
    };

[Kaamo]

Quelques conseils :
Au lieu d'utiliser le constructeur Array() utilise la forme littéral []. Pour la simple et bonne raison qu'il y a un bug connu en utilisant celle que tu emploies.
Exemple pour comprendre :

Code javascript :

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

1
2
3
4
5
6
7
var arr1 = new Array(2);
var arr2 = [2];
// On pourrait se dire que ces deux formes sont identiques ? Faux ...
console.log(arr1); // Cela crée un tableau vide, préformaté pour accueillir 2 éléments
console.log(arr1.length); // 2
console.log(arr2); // Est bien ce que l'on souhaite. A savoir un tableau dont le premier élément est le "Number" "2" : [2]
console.log(arr2.length); // 1

Pour revenir à ton problème, il faut que tu "lies" la fonction avec le contexte de Validator en effet. Pour cela, il y a une fonction : bind().

Appliqué à ton cas :

Code javascript :

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

1
2
3
4
5
6
7
this.callback = {
    "string": this.checkString.bind(this)
  , "phone": this.checkTel.bind(this)
  , "email": this.checkEmail.bind(this)
  , "number": this.checkNumber.bind(this)
  , "file": this.checkFile.bind(this)
};

C'est de l'ES 5, donc compatibilité : Chrome >= 7, Firefox >= 4, IE >=9. Penser à un polyfill si besoin de compatibilité avec les autres navigateurs (voir source).

Source

[Invité]

@Kaamo

Au lieu d'utiliser le constructeur Array() utilise la forme littéral []. Pour la simple et bonne raison qu'il y a un bug connu en utilisant celle que tu emploies.

Ce n'est pas un bug => new Array(len) (1 seul argument).

Voir spec ECMASCRIPT

V3 page 89
V5 page 123

A+

[Kaamo]

J'en suis bien conscient, je n'ai pas voulu entrer dans les détails. (je le mentionne rapidement dans les commentaires du code ci-dessus)
J'ai employé bug mais c'est un abus de langage. Je voulais dire : new Array(2) ne fait pas ce qu'on attend normalement, c'est à dire qu'il ne créeé pas un tableau dont le premier élément est le Number "2" comme on pourrait le croire.

Merci de la précision

[SylvainPV]

Utilise les méthodes call ou apply

Code :

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

 this.callback[this.types[i]].call(this,elements[j],ENom);

[sekaijin]

dans mes bricolages j'avais pondu ceci il y a quelques années
http://www.developpez.net/forums/d85...s-autoverifes/

A+JYT