Verificando se os campos tem o mesmo valor em JavaScript

Salve! Tenho um codigo Javascript pra verificar se os campos senha e confirmar senha são iguais se forem ele envia os dados caso contrario mostra uma mensagem de erro. Tá funcionado de boa o problema é quando eu aperto em enviar ele deveria verificar se as senhas são iguais e mostrar uma mensagem, entretanto, ele envia os dados e não mostra a mensagem de erro. Estou tentando fazer basicamente o que o GUJ faz quando tentamos logar e se a senha estiver errado ele mostra uma mensagem de erro. Algué sabe como ajudar??

<html>
<head></head>
<body>
<script>
function verifica(){
var senha = document.getElementById('senha').value;
var cofirma = document.getElementById('confirma').value;
if(senha != confirma){
  erro.innerHTML = '<b>Sehas diferentes<b>';
    return false;
  }else{
return true;
}
}
 </script>
 <form method="post" action="" >
 <label>Senha:</label><input type="text" id="senha">
 <label>Confirma:</label><input type="text" id="confirma">
<font color="red" id="erro"></font>
 <input type="submit" onclick="verifica()">
  </form>
 </body>
  </html>

Ao invés de interceptar o clique no botão, você precisa interromper o submit do form. Isso é feito no evento onsubmit. Algo assim:

<form method="post" action="" onsubmit="return funcaoQueVerificaCampos()" >
</form

Teoricamente, é só mover a função que você já criou, colocando-a no onsubmit. Teste aí e veja se funciona.

Veja um exemplo completo em: https://stackoverflow.com/questions/8664486/javascript-code-to-stop-form-submission .

Abraço.

1 curtida