En algunas ocasiones, te encontrarás en una situación donde quieres evitar que un evento realice su acción por defecto. El escenario más común es el de un formulario web, por ejemplo, un formulario personalizado para un registro. Cuando llenas todos los campos y haces clic en el botón para enviar, el comportamiento normal es que la información sea enviada a un servidor para que sea procesada, mientras que el navegador se redirecciona a una página donde se muestra un mensaje de "envío exitoso" (o a la misma página si no se especifica otra).
El problema viene cuando el usuario no ha introducido sus datos correctamente. Como desarrollador, quieres evitar que la información sea enviada al servidor y, en su lugar, mostrar un mensaje de error que señale cuáles son los problemas y qué se necesita para corregirlos. Algunos navegadores tienen soporte para características de validación automática de formularios, pero tomando en cuenta que muchos otros no, se te recomienda que no confíes en estos mecanismos e implementes tus propias pruebas de validación. Veamos un ejemplo.
Primero, un formulario HTML simple que requiere que introduzcas tu nombre y apellido:
.png "carbon(690).png")
Ahora un poco de JavaScript. Aquí vamos a implementar una simple prueba dentro del manejador del evento submit (el evento submit es lanzado en un formulario cuando este se envía) que determina si los campos de texto están vacíos o no. En caso de que lo estén, llamamos al método preventDefault() del objeto evento, el cual detiene el envío del formulario y muestra un mensaje de error en el párrafo debajo de nuestro formulario para hacerle saber al usuario cuál es el problema:
.png "carbon(692).png")
Obviamente esta es una validación bastante débil, esto no detendría al usuario de, por ejemplo, llenar los campos del formulario con espacios en blanco o números, pero, es suficiente para los propósitos de nuestro ejemplo. El resultado es el siguiente: