jQuery: disabilitare il tasto Invio nei form ma nel modo corretto

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) {
    return false;
  }
});

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() == '' || !$input.prop('checked') || !$('option:selected', $input).length) {
			filled = false;
		}
	});

	return filled;
};

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

$('#form').keypress(function(e) {
 if(!isFormFilled()) {
  if (e.which == 13) {
    return false;
  }
 }
});

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