JavaScript:Atribuir uma função a uma propriedade que será executada novamente cada vez que a propriedade for chamada

Question

Estou criando uma biblioteca de formulários HTML5 JS.A idéia é transformar elementos com uma classe de .form-item em divs editáveis ​​de conteúdo, usando os atributos de dados dos elementos como instruções para o tipo de item de formulário, validação, etc. que deve ser criado.

O código abaixo cria um objeto de validação para um único item de formulário que verifica se o comprimento mínimo do valor do campo é atendido.As propriedades do objeto incluem o elemento DOM ao qual ele se aplica (el), o comprimento mínimo do campo (minLen), a mensagem de erro (msgError) que deve ser exibida se esse comprimento mínimo não for atingido e uma função (submit) que retorna se o objeto é validado, exibindo a mensagem de erro caso isso não aconteça.

No entanto, a função de propriedade submit sempre retorna falso.Tenho quase certeza de que sei por quê, mas não tenho certeza da melhor maneira de corrigi-lo.Acredito que o problema que estou enfrentando tem a ver com a noção de encerramento.A propriedade submit verifica o comprimento do innerHTML do elemento item do formulário e o compara com a propriedade minLen.Mas acho que isso só acontece no momento da instanciação do objeto de validação, quando o innerHTML.length é sempre 0 (porque o item do formulário e o objeto de validação devem ser criados antes do usuário poder inserir qualquer coisa no campo ).Como devo modificar o código abaixo para que a função de propriedade submit seja executada novamente sempre que for chamada (verificando assim o comprimento atual do innerHTML do campo, em vez do comprimento no momento da instanciação)?

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'));

Eu encontrei uma solução, que é passar o innerHTML do elemento form item como um argumento para a função de propriedade submit, assim:

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

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

No entanto, não gosto dessa solução porque parece redundante ter que especificar novamente o elemento DOM no código item.submit (uma vez que o objeto já contém esse elemento DOM em sua propriedade el).

Então...O que devo fazer?

Answer 1

Eu sou um idiota.Eu estava comparando o innerHTML com o comprimento mínimo, em vez do LENGTH do innerHTML com o comprimento mínimo.Agora funciona :)