jQuery: per un approccio object-oriented nella validazione dei form

Perché continuare ad usare un approccio procedurale nella validazione dei form con jQuery quando JavaScript ci mette a disposizione delle potenti caratteristiche object-oriented? La risposta più logica è che è molto più semplice ed immediato scrivere un'unica funzione piuttosto che creare oggetti. Ma questo approccio è sbagliato perché ci impedisce di riutilizzare il nostro codice in altri progetti.

Dobbiamo imparare ad organizzare il codice in livelli:

1. L'elemento form di riferimento, un oggetto jQuery.
2. Le regole di validazione associate a ciascun tipo di campo, ossia:
   1. tipo nominale
   2. tipo e-mail
   3. tipo stringa priva di caratteri speciali
   4. tipo non vuoto.
3. Un metodo privato che mostri gli errori per ciascun campo.
4. Un metodo pubblico di validazione.

Cominciamo dalla struttura del nostro oggetto:

var Validator = function(form) {

	this.form = $(form); // oggetto jQuery
	
	var Elements = {
	
		// oggetto privato che contiene campi e regole
	
	
	};
	
	var handleError = function(element, message) {
	
		// metodo privato con due parametri, il campo e il messaggio di errore
	
	
	};

	this.validate = function() {
	
		// metodo pubblico di validazione
	
	
	};
};

Cominciamo dai campi e dalle regole specificate con espressioni regolari:

var Elements = {
        name: {
            selector: $('#name'),
            reg: /^[a-zA-Z]{2,20}$/
        },

        email: {
            selector: $('#email'),
            reg: /^[a-z-0-9_+.-]+\@([a-z0-9-]+\.)+[a-z0-9]{2,7}$/i
        },

        string: {
            selector: $('#subject'),
            reg: /^\s+|<|>|"|\$|&|\/|'|\*|#|@|\\|\.\.|\./
        },

        empty: {
            selector: $('#message'),
            reg: /^\s+$/
        }
};

Ciascun oggetto di Elements ha la stessa struttura composta dal selettore di riferimento e dall'espressione regolare da usare. Ora possiamo definire le azioni del nostro metodo per visualizzare gli errori:

var handleError = function(element, message) {
        element.addClass('input-error');
        var $parent = element.parent();
        var error = $('<div class="error"></div>').text(message);
        error.appendTo($parent);
        element.keyup(function() {
            $(error).fadeOut(1000, function() {
                element.removeClass('input-error');
            });
        });

};

Il metodo evidenzia il campo contenente l'errore, mostra il messaggio e quindi quando l'utente comincia a correggere fa sparire il messaggio di errore e ripristina il layout originale del campo.

Infine, il metodo pubblico di validazione esegue un ciclo for...in sull'oggetto Elements effettuando i vari controlli e mostrando gli errori se necessario:

this.validate = function() {

        this.form.submit(function(e) {

            for (var i in Elements) {

                var type = i;
                var validation = Elements[i];

                switch (type) {

                case 'name':
                    if (!validation.reg.test(validation.selector.val())) {
                        handleError(validation.selector, 'Not a valid name.');
                    }
                    break;
                case 'email':
                    if (!validation.reg.test(validation.selector.val())) {
                        handleError(validation.selector, 'Not a valid e-mail address.');
                    }
                    break;
                case 'string':
                    if (validation.reg.test(validation.selector.val()) || validation.selector.val() == '') {
                        handleError(validation.selector, 'Special characters now allowed or empty element.');
                    }
                    break;
                case 'empty':
                    if (validation.reg.test(validation.selector.val()) || validation.selector.val() == '') {
                        handleError(validation.selector, 'Message field cannot be empty.');
                    }
                    break;
                default:
                    break;


                }

            }

            e.preventDefault();
        });

};

Tutto il codice viene eseguito in questo modo:

$(function() {

	var validator = new Validator('#test');
	validator.validate();​


});