JavaScript: Assegnazione di una funzione a una proprietà che verrà eseguita nuovamente ogni volta che viene chiamata la proprietà

Question

Sto creando una biblioteca del modulo JS HTML5. L'idea è di trasformare gli elementi con una classe di elementi .form nei div modificabili del contenuto, utilizzando gli attributi dati degli elementi come istruzioni per il tipo di elemento modulo, convalida, ecc.

Il codice seguente crea un oggetto di convalida per un elemento singolo modulo che controlla se la lunghezza minima del valore del campo è soddisfatta. Le proprietà dell'oggetto includono l'elemento DOM che si applica a (EL), la lunghezza minima per il campo (Minlen), il messaggio di errore (MSGerror) che dovrebbe essere visualizzato se tale lunghezza minima non è soddisfatta e una funzione (invio) che ritorna Se l'oggetto convalida, visualizzando il messaggio di errore se non lo fa.

Tuttavia, la funzione di proprietà di invio restituisce sempre false. Sono abbastanza sicuro di sapere perché, ma non sono sicuro del modo migliore per correggerlo. Credo che il problema che stia correndo ha a che fare con la nozione di chiusura. La proprietà Invia controlla la lunghezza dell'innerhtml dell'elemento elemento del modulo e lo confronta con la proprietà Minlen. Ma penso che questo accada solo al momento dell'istanziazione dell'oggetto di convalida, quando l'INNERNHTML.LENGENGURY è sempre 0 (perché l'elemento modulo e l'oggetto di convalida, devono essere creati prima dell'utente in grado di inserire nulla nel campo ). Come dovrei modificare il codice sotto in modo che la funzione di invio della proprietà andasse di nuovo in qualsiasi momento si chiama (controllando così la lunghezza corrente dell'innerhtml del campo, piuttosto che la lunghezza al momento dell'istanza)?

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

.

Ho trovato una soluzione, che è di passare l'INNERNHTML dell'elemento elemento del modulo come argomento alla funzione di invio della proprietà, come questa:

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

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

.

Tuttavia, non mi piace quella soluzione perché sembra ridondante deve essere ri-specificare l'elemento DOM nel codice articolo.Submit (poiché l'oggetto contiene già quell'elemento DOM nella sua proprietà EL).

Allora ... cosa dovrei fare?

Answer 1

Sono un idiota.Stavo confrontando l'INNERNHTML alla lunghezza minima, piuttosto che la lunghezza dell'innerhtml alla lunghezza minima.Ora funziona :)