Mensaje de alerta si abandonas un formulario sin salvar

En ocasiones creamos formularios en los que queremos prevenir que el usuario abandone la página sin haber salvado los cambios.

Para conseguir esto podemos usar el metodo de javascript, que es invocado antes de que el ususario se vaya de la pagina (click en un link, o refresco de pantalla) :

window.onbeforeunload  = function(e) {
   return "message";
};

Pero no es suficiente con esto, tenemos que cambiar un poco esta función, para mejorar el comportamiento en varios navegadores, y para evitar que salga dicho mensaje al hacer submit del formulario.

$('form').find(':input').change(function(){
	var dirtyForm = $(this).parents('form');

	// change form status to dirty
	dirtyForm.addClass('unsavedForm');
});

$('form').submit(function () {
	$(this).removeClass('unsavedForm');
});

window.onbeforeunload = function(e) {
	e = e || window.event,
	message = "lorem ipsum";

	// show alert if there are some unsaved form
	if ($('.unsavedForm').size()) {
		// For IE and Firefox
                if (e) {
                  e.returnValue = message;
                }
                // For Safari
                return message;
	}
};

Con este pequeño código conseguiremos nuestro objetivo.

El alert que sale es de sistema (vamos, muy feo) y no se puede customizar mas que el mensaje (y no en todos los navegadores), pero evitaremos alguna que otra perdida de datos por parte de nuestros usuarios.

Espero que os sea de ayuda.