Botão qualquer se torna "submit" dentro do form

[vinezof2 0]

Olá pessoal, eu estava estudando javascript então criei um form para fazer validações com javascript, mas eu não conseguia fazer as validações porque o botão dava submit no form automaticamente. Eu testei isso no Chrome e Internet Edge e aconteceu, sempre que tem um button dentro da tag form ele transforma em um submit.

 

Isso é um erro ou é do html mesmo? 

[Omar~ 87]

Isso é porque quando detectado um elemento button dentro de uma tag form, automaticamente qualquer navegador já irá interpreta-lo como:

<button type="submit">

Independente do navegador ele por sí só já executa o protocolo e redireciona para o devido action do cabeçalho no form.

Então o que temos de fazer é remover o comportamento padrão do browser ao submeter dados. A forma mais prática que vejo para se fazer isso é sempre não retornar nada durante a execução, exemplo:

Spoiler

<form id="exemplo" action="blablabla" method="post" onsubmit="return false;">
  <input type="text" />
  <button onclick="alguma_funcao_js()">Não executa</button>
  <button onclick="alguma_outra_funcao_js()">Não executa</button>
  
  <button onclick="funcao_que_submete_o_form()">Aqui executa</button>
</form>

<script>
  function alguma_funcao_js() {
    console.log('oi');
  }
  function alguma_outra_funcao_js() {
    console.log('oi segundo');
  }
  function funcao_que_submete_o_form() {
    document.getElementById('exemplo').submit();
  }
</script>

 

 

[vinezof2 0]

Obrigado pela resposta, eu estou colocando as tags button fora do form para resolver, vou tentar do jeito que você falou. Tópico resolvido.

Obrigado 

 

PS: isso é muito chato não sei se sempre teve isso ou se isso é mais recente, mas deveria ter uma forma de anular isso definitivamente.

[luisfeliperm2 4]

é pq o browser interpreta ele como type=submit, você tem que colocar o parâmetro type="button"