En este post sobre formularios HTML y JavaScript vamos a ver cómo prevenir que el form sea enviado al presionar la tecla Enter; para ello se usará JavaScript o un simple atributo HTML.

Prevenir envío de formulario

Lo que tenemos que hacer es escuchar el evento keydown del input en cuestión, y detectar si se presionó la tecla Enter. En caso de que sí, prevenimos el comportamiento con preventDefault.

Para obtener una referencia al elemento puedes utilizar getElementById, querySelector, etcétera. Yo usaré querySelector y queda así:

See the gist on github.

En este caso estamos previniendo que se envíe cuando se presiona enter en el input que tiene el id nombre. Podemos ver el HTML así:

See the gist on github.

Si quieres puedes probar el ejemplo en este enlace. Verás que si presionas Enter, el formulario no se envía, y que solo lo hace cuando presionas el botón destinado al envío.

Varios input

Igualmente podrías desactivar este comportamiento para todos los input.

Para ello recomiendo colocarles determinada clase (de igual forma podría hacerse global a los input, pero en ocasiones es mejor hacerlo por separado) y luego obtener los elementos con querySelectorAll.

Comenzamos definiendo nuestro formulario:

See the gist on github.

Fíjate en que nuestros campos del formulario tienen la clase prevenir-envio; ahora obtenemos una referencia a todos esos elementos y por cada uno le agregamos el listener:

See the gist on github.

Lo que hacemos es usar forEach en combinación de las arrow functions para agregar el listener a cada input. Es decir, hacemos para todos lo que hicimos en el ejemplo del input individual.

Si quieres puedes probar el ejemplo en línea.

Desactivar envío con Enter en formulario completo

Este truco solo funciona en caso de que tu formulario no tenga ningún textarea (pues si los tiene, no se podrá colocar una nueva línea). Simplemente indicamos que si la tecla es Enter no se haga nada agregando el atributo onkeydown:

See the gist on github.

En este caso ya no necesitamos JavaScript, pues lo estamos indicando desde el HTML. De igual modo dejo el código completo:

See the gist on github.

Y si quieres puedes ejecutarlo en línea.