jQuery: usare i Deferred Objects nella validazione dei form

I Deferred Objects hanno la formidabile caratteristica di permettere a singole sezioni di codice di comunicare tra di loro e di interagire in modo molto efficace. In questo articolo vedremo come sfruttare questa caratteristica nella validazione dei form.

Supponiamo di dover eseguire la validazione inline dei campi. Solitamente legheremo un evento keyup ed una routine di validazione. Siamo per forza di cose costretti a inserire il codice in un unico scope.

Con i Deferred invece possiamo svincolare la routine di validazione dall'evento e passare semplicemente il valore restituito alla seconda azione utilizzando la combinazione $.when()...done().

Ricordiamo che il metodo .done() accetta appunto questi valori di ritorno. Ecco un esempio:

(function( $ ) {
	function validate( value ) {
		var pattern = /^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*@[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$/;
		if( pattern.test( value ) ) {
			return true;
		} else {
			return false;
		}
	}
	
	
	
  $( document ).ready(function() {
	
	$( "#email" ).on( "keyup", function() {
		var val = $( this ).val();
		
		
		$.when( validate( val ) ).done( function( def ) {
			if( def ) {
				$( "#submit" ).removeAttr( "disabled" );
			}
		});
	});
	
  });

})( jQuery );