jQuery: come disabilitare il tasto Invio sui form in modo usabile

Per prevenire invii accidentali ed incompleti dei form gli sviluppatori jQuery spesso disabilitano il tasto Invio durante la digitazione. In realtà questa soluzione non basta da sola.

Considerate questo codice:

$( "#form" ).keypress(function( e ) {
  if ( e.which === 13 ) {
      e.preventDefault();
  }
});

Il tasto Invio viene disabilitato controllando il valore numerico della proprietà which dell'oggetto event. Il problema di questa soluzione è che ha luogo senza una verifica preliminare dello stato del form. Infatti se il form è stato completato dall'utente, il codice disabiliterà egualmente il tasto Invio.

Occorre quindi una verifica preliminare sui campi del form:

var isFormFilled = function() {
	var filled = true;
	$( ":input", "#form" ).each(function() {
		var $input = $( this );
		if( $input.val().length === 0 ) {
			filled = false;
		}
	});

	return filled;
};

Ora il nostro codice iniziale può essere riscritto come segue:

$( "#form" ).keypress(function( e ) {
 if( !isFormFilled() ) {
  if ( e.which === 13 ) {
      e.preventDefault();
  }
 }
});

In questo modo andiamo a disabilitare il tasto Invio solo quando ce n'è effettivamente bisogno.