1

Não estou conseguindo prevenir o botão submit de realizar sua ação caso as informações digitadas não sejam iguais, alguém poderia me ajudar?

HTML

<form method="post" action="php/cadastro.php">
    <span class="form_title">Cadastre-se</span>
    <fieldset>
        <input type="text" name="nome" class="txt_input first_input" placeholder="Nome">
        <input type="email" name="email" class="txt_input" id="email" placeholder="E-mail">
        <input type="email" name="confirmaEmail" class="txt_input" id="confirma-email" placeholder="Confirmar e-mail">
        <input type="password" name="senha" class="txt_input" id="senha" placeholder="Senha">
        <input type="password" name="confirmaSenha" class="txt_input" id="confirma-senha" placeholder="Confirmar senha">
    </fieldset>
    <fieldset>
        <input type="checkbox" name="termos">
        <p>Eu concordo com os <span>termos de uso e política de privacidade</span> do WEB TRAINING</p>
    </fieldset>
    <fieldset class="buttons">
        <input type="submit" name="Cadastrar" value="Cadastrar" class="log_btn" id="cadastro-btn" onclick="valida()">
        <input type="button" name="Voltar" value="Voltar" class="log_btn volta_btn" id="volta-btn" onclick="voltar()">
    </fieldset>
</form>

Javascript

   var email = document.getElementById('email');
var confirmaEmail = document.getElementById('confirma-email');

var senha = document.getElementById('senha');
var confirmaSenha = document.getElementById('confirma-senha');

var cadastrar = document.getElementById('cadastro-btn');

    function valida(){

        if(email != confirmaEmail || senha != confirmaSenha){
            cadastrar.preventDefault();
        }

    };

*Já está linkado o script no fim do HTML *Tentei as formas que vocês enviaram, porém nenhuma funcionou

4
  • Faltou o operador (OU) na condição. if(email != confirmaEmail || senha != confirmaSenha){ ... e para pegar o valor dos campos não esqueça do .value ex: var confirmaSenha = document.getElementById('confirma-senha').value;
    – rray
    2/08/2016 às 17:52
  • Note também que você possui um ) extra no final da função valida. A não ser que tenha sido um erro de digitação ao migrar a questão. 2/08/2016 às 17:55
  • ainda assim não funciona, código corrigido 2/08/2016 às 17:57
  • Coloquei corrigido em baixo
    – Miguel
    2/08/2016 às 19:47

3 Respostas 3

7

Faltou pegar o valor de cada input e especificar o operador que junta as expressões.

Ao fazer document.getElementById('email'); isso pega o elemento inteiro, no seu caso você deve pegar apenas o valor então especifique a propriedade value para cada elemento.

Mude;

var email = document.getElementById('email');

Para:

var email = document.getElementById('email').value;

E adicione o operador entre as expressões

if (email != confirmaEmail ||  senha != confirmaSenha) {
7

O .preventDefault() deve aplicar-se a um evento e não a um elemento. Passa o evento à função e já podes cancelar o evento:

onclick="valida(event)"> // no HTML

E no JavaScript

function valida() {
    if (email.value != confirmaEmail.value || senha.value != confirmaSenha.value) { // <-- faltava um "||" aqui
        cadastrar.preventDefault();
    }
} // <-- tinhas aqui um ")" a mais...

jsFiddle: https://jsfiddle.net/wgyqj33m/1

Nota: tens de usar .value para leres a propriedade do elemento. Senão vais estar a comparar elementos do DOM e não o seu valor, como o @TobyMosque bem referiu.

2
  • 1
    não sabia que comparar dois HTMLElement seria o mesmo de comparar os seus valores: email != confirmaEmail e email.value != confirmaEmail.value, e muito menos que era possivel chamar o preventDefault sobre o HTMLElement e não sobre o Event 2/08/2016 às 18:00
  • 2
    @TobyMosque haha :) com os outros erros tinha descuidado esse. Corrigi, obrigado :)
    – Sergio
    2/08/2016 às 18:01
6

Tinha alguns errors de sintaxe, no if(...) e uns ); a mais depois da função valida(), creio ser assim que quer:

function valida(e){

   var email = document.getElementById('email').value;
   var confirmaEmail = document.getElementById('confirma-email').value;

   var senha = document.getElementById('senha').value;
   var confirmaSenha = document.getElementById('confirma-senha').value;

   if (email != confirmaEmail  || senha != confirmaSenha) {
       e.preventDefault();
   }

}
<form method="post" action="php/cadastro.php">
            <span class="form_title">Cadastre-se</span>
        <fieldset>
            <input type="text" name="nome" class="txt_input first_input" placeholder="Nome">
            <input type="email" name="email" class="txt_input" id="email" placeholder="E-mail">
            <input type="email" name="confirmaEmail" class="txt_input" id="confirma-email" placeholder="Confirmar e-mail">
            <input type="password" name="senha" class="txt_input" id="senha" placeholder="Senha">
            <input type="password" name="confirmaSenha" class="txt_input" id="confirma-senha" placeholder="Confirmar senha">
        </fieldset>
        <fieldset>
            <input type="checkbox" name="termos">
            <p>Eu concordo com os <span>termos de uso e política de privacidade</span> do WEB TRAINING</p>
        </fieldset>
        <fieldset class="buttons">
            <input type="submit" name="Cadastrar" value="Cadastrar" class="log_btn" id="cadastro-btn" onclick="valida(event)">
            <input type="button" name="Voltar" value="Voltar" class="log_btn volta_btn" id="volta-btn" onclick="voltar()">
        </fieldset>
</form>

Coloquei o .value que me escapou, as outras resposta chamaram-me à atenção para isso. Muito importante também é ir buscar os valores dentro da função senão vai ter os valores errados (os que estão no load da página e não os que estão preenchidos quando tenta submeter o form). Corrigi

5
  • so vou conseguir testar amanha pela manha, mas assim que eu testar aviso :D pelo que vi ele com certeza deve funcionar :3 4/08/2016 às 0:01
  • Não funcionou :/ 4/08/2016 às 12:18
  • Copiou tudo certinho @MuriloGambôa? Dá algum erro na consola?
    – Miguel
    4/08/2016 às 12:20
  • sim @Miguel :3 primeiro fiz por mim mesmo, como não funcionou, eu copiei e colei, mas ainda assim, nada :/ 4/08/2016 às 12:20
  • Aqui está @MuriloGambôa , assim deve ser mais facil: jsfiddle.net/rkjswtL7
    – Miguel
    4/08/2016 às 12:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .