Como evitar que botões em um formulário façam o envio (prevent submit)

Post ensinando a como evitar que botões, elementos do tipo “button” em um formulário façam o envio (prevent default submit).

Prevent default submit – O problema

Utilizando o elemento <button> em um formulário, sem definir o seu tipo “type” irá causar o envio do formulário quando clicado.

<form method="post" action-xhr="#">

   <p>Teste</p>

   <button >
Repare que no exemplo acima estou utilizando “return false;” no evento onclick, mesmo assim o formulário ainda será enviado.
 
Você também poderá utilizar no “form” no evento “onsubmit” o valor “return false;”, porém essa não é a melhor saída já que isso irá bloquear o envio do formulário por qualquer outro botão do tipo “submit”.
 
Declarando tipo “button”
 
A solução é bem simples para este problema.
 
<button type="button" >
Defina o atributo “type” do tipo “button”, dessa forma o navegador entenderá que o botão não é do tipo “submit” que é considerado o padrão quando não declarado explicitamente no elemento o seu tipo.
  
 
Tags: html