Javascript: attribuer une fonction à une propriété qui fonctionnera à nouveau chaque fois que la propriété est appelée

Question

Je crée une bibliothèque de formulaires HTML5 JS. L'idée est de transformer les éléments avec une classe de .form-item en Divs modifiables de contenu, en utilisant les attributs de données des éléments comme instructions pour le type d'élément de formulaire, la validation, etc. qui doit être créée.

Le code ci-dessous crée un objet de validation pour un seul élément de formulaire qui vérifie si la longueur minimale de la valeur de champ est remplie. Les propriétés de l'objet incluent l'élément DOM à lequel il s'applique (el), la longueur minimale pour le champ (minlen), le message d'erreur (MSGerror) qui doit être affiché si cette longueur minimale n'est pas remplie, et une fonction (soumission) qui revient si l'objet valide, affichant le message d'erreur si ce n'est pas le cas.

Cependant, la fonction de propriété Soumettre renvoie toujours False. Je suis presque sûr que je sais pourquoi, mais je ne suis pas sûr de la meilleure façon de le corriger. Je crois que le problème que je rencontre a à voir avec la notion de fermeture. La propriété Soumettre vérifie la durée de l'InnerHTML de l'élément d'élément de formulaire et la compare à la propriété Minlen. Mais je pense que cela ne se produit qu'au moment de l'instanciation de l'objet de validation, lorsque l'innerhtml.length est toujours 0 (car l'élément de formulaire et l'objet de validation doivent être créés avant que l'utilisateur ne puisse entrer quoi que ce soit dans le champ ). Comment devrais-je modifier le code ci-dessous afin que la fonction de propriété de soumettre fonctionne à nouveau à tout moment (vérifiant ainsi la longueur actuelle de l'InnerHTML du champ, plutôt que la longueur au moment de l'instanciation)?

function formValidateMinLen(item){
    var minLen = item.attr('data-minLen');

    this.el = item;
    this.minLen = minLen;
    this.msgError = item.attr('data-error_minLen');
    this.submit = function(){
        if(this.el.html() >= this.minLen){
            return true;
        }else{
            this.el.after('<div class="msgError">' + this.msgError + '</div>');
            return false;
        }
    }
}

item = new formValidateMinLen($('#registration-form .form-item:first'));

J'ai trouvé une solution, qui est de passer l'innerhtml de l'élément d'élément de formulaire comme argument à la fonction de propriété soumettre, comme ceci:

this.submit = function(html){
    if(html >= this.minLen){
        ...
    }

item = new formValidateMinLen($('#registration-form .form-item:first'));
item.submit($('#registration-form .form-item:first').html());

Cependant, je n'aime pas cette solution car il semble redondant de devoir relancer l'élément DOM dans le code item.Submitte (puisque l'objet contient déjà cet élément DOM dans sa propriété EL).

Donc qu'est ce que je devrais faire?

Answer 1

Je suis un idiot. Je comparais l'interhtml à la longueur minimale, plutôt que la longueur de l'innerhtml à la longueur minimale. Maintenant ça marche :)