Two conditions in the same if() javascript loop

Question

I can’t prevent the button submit to carry out its action if the information typed is not equal, someone could help me?

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();
        }

    };

*The script is already linked at the end of the HTML *I tried the ways you sent, but none worked

Answer 1

Missed to take the value of each input and specify the operator that joins the expressions.

In doing document.getElementById('email'); this takes the whole element, in your case you should only take the value then specify the property value for each element.

Change;

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

To:

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

And add the operator between expressions

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

Answer 2

The .preventDefault() should apply to an event and not to an element. You pass the event to the function and you can cancel the event:

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

And in 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

Note: you have to use .value to read the property of the element. Otherwise you will be comparing DOM elements and not their value, such as @Tobymosque well mentioned.

Answer 3

There were some syntax errors in if(...) and a few ); most after the function valida(), I believe that’s the way you want it:

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>

I put the .value that I missed, the other answers drew my attention to that. It is also very important to fetch the values inside the function or else it will have the wrong values (those that are in the page load and not those that are filled when you try to submit the form). Corrected