0

Eu estou com um problema, Eu quero que antes de dar submit execute validarsenha();

    <div class="nova-conta">
    <h2>Cadastre-se</h2>
    <form onsubmit="validarsenha()" method="POST" action="cadastro.php" name="novocadastro"  >
        <div class="form-group">
            <label for="email" class="control-label">E-mail:</label>
            <input type="email" name="f_email" placeholder="Digite seu E-mail" class="form-control" id="email" data-error="Por favor, informe um e-mail correto." required>
        </div>

        <div class="form-group">
            <label for="senha" class="control-label">Senha:</label>
            <input type="password" name="f_senha" placeholder="Digite sua Senha"  class="form-control" id="f_senha" size="20" required>
        </div>
        <div class="form-group">
                <label for="senha" class="control-label">Repita a senha:</label>
                <input type="password" name="f_senhaconfirma" placeholder="Confirme Senha"  class="form-control" id="f_senhaconfirma" size="20"  required>
            </div>
       <div id="btn-conta"> 

        <a href="Index.html" class="btn btn-default"> Cancelar</a>
        <button type="submit" onclick="return validarsenha()" class="btn btn-primary">Cadastrar</button>

       </div>
    </form>

</div>

Lembrando q eu to chamando essa funcao

function validarsenha(){
var senha=novocadastro.f_senha.value;
var rep_senha=novocadastro.f_senhaconfirma.value;

if(senha == ""  || senha.length < 5){
    alert (`Preencha o campo senha com no minimo 6 caracteres`)
    novocadastro.f_senha.focus();
    return false;
}
if(rep_senha == ""  || rep_senha.length < 5){
    alert (`Preencha o campo confirma senha com no minimo 6 caracteres`)
    novocadastro.f_senhaconfirma.focus();
    return false;
}
if(senha != rep_senha){
    alert (`As senhas sao diferentes!`)
    novocadastro.f_senhaconfirma.focus();
    return false;
}

}

Ele sempre ta indo para o PHP, e nao executa a função validar. Alguem sabem como posso resolver esse meu problema?

2
  • O código está funcionando... No Chrome ao menos. A forma com a qual você está capturando os elementos do DOM está depreciada, e não tem garantia de que irá funcionar em todos os navegadores. Tente utilizar var senha = document.getElementById('f_senha').value;
    – Andre
    Commented 12/05/2019 às 0:56
  • Coloque no console do chrome para preservar o LOG, entao tente submeter, é muito provavel que tenha algum erro de script em outro lugar/script.
    – Syzoth
    Commented 12/05/2019 às 0:57

3 Respostas 3

0

Você pode fazer com js para quando o usuário terminar de digitar a senha ele já fazer essa validação. No exemplo abaixo tenho uma mensagem de exibição para o usuário caso as senhas sejam diferentes, e também uma variável chamada focus que fica true caso entre nessa validação, e no meu botão de submit só envia se a variável for false, assim sempre que entrar em alguma validação meu formulário não vai submeter.

HTML:

<label>Senha</label>
<input class="form-control" type="password" placeholder="********" id="senha_clinica">

<label>Confirmar Senha</label>
<input class="form-control" type="password" placeholder="********"                                     id="senha_confirmacao_clinica">
<span class='error-validacao'>As senhas não coincidem.</span>

jQuery

var focus = false;

 $('#senha_confirmacao_clinica').change(function(){
        //validar se as senhas conferem 
        if($('#senha_confirmacao_clinica').val()!=$('#senha_clinica').val()){
            $('#senha_confirmacao_clinica').css({'border-color': 'red'});
            $('#senha_confirmacao_clinica').parent().find('.error-validacao').css({'display':'block'});
            if ( !focus ) {
                jQuery('#senha_confirmacao_clinica').focus();
                focus = true;
            }
        }
        else{
            $('#senha_confirmacao_clinica').css({'border': '1px solid #ced4da'});
            $('#senha_confirmacao_clinica').parent().find('.error-validacao').css({'display':'none'});
        } 
    });

$('#btn_submit').click(function(){ 
        var envioAjax = false;
        //continuação do ajax de envio...
    });
1
0

A validação pode até ocorrer mas o evento padrão do formulário é realizar a requisição. Você pode utilizar o método preventDefault para cancelar o evento padrão e realizar as manipulações necessárias.

const form = document.querySelector('form[name="novocadastro"]');

form.addEventListener("submit", function(event) {
    event.preventDefault(); //Cancelando o evento padrão

    const validated = validarsenha(); //Executando a função de validação

    if (validated) {
        form.submit(); //Realizando o submit do formulário caso validação esteja correta
    }
});

Agora é necessário adicionar um retorno verdadeiro na função de validação.

function validarsenha() {
    var senha=novocadastro.f_senha.value;
    var rep_senha=novocadastro.f_senhaconfirma.value;

    if (senha == ""  || senha.length < 5) {
        alert('Preencha o campo senha com no minimo 6 caracteres');
        novocadastro.f_senha.focus();
        return false;
    }
    if (rep_senha == ""  || rep_senha.length < 5) {
        alert('Preencha o campo confirma senha com no minimo 6 caracteres');

  novocadastro.f_senhaconfirma.focus();
        return false;
    }
    if (senha != rep_senha) {
        alert('As senhas sao diferentes!');

  novocadastro.f_senhaconfirma.focus();
        return false;
    }

    return true;
}
0

Quando você clica no botão de submit, você está chamando uma função com onclick e retornando false caso entre em algum if dentro da função, com isso cancelando o efeito do submit. Logo, se torna desnecessário o atributo onsubmit="validarsenha()" no form. A validação já é feita pelo onclick do botão, que, aliás, nem precisa de type="submit" porque o button já é type submit por padrão.

Então o form ficará apenas:

<form method="POST" action="cadastro.php" name="novocadastro">

E o botão assim:

<button onclick="return validarsenha()" class="btn btn-primary">Cadastrar</button>

Isso já é suficiente para validar a senha da forma que quer.

Redundância

Nos if's são desnecessárias essas comparações de vazio, por exemplo:

senha == "" || senha.length < 5

Bastaria apenas senha.length < 5 porque se senha == "" já atende a condição senha.length < 5. Então deveria ficar apenas:

if(senha.length < 5){

E:

if(rep_senha.length < 5){

Veja:

function validarsenha(event){
   var senha=novocadastro.f_senha.value;
   var rep_senha=novocadastro.f_senhaconfirma.value;
   
   if(senha.length < 5){
       alert (`Preencha o campo senha com no minimo 6 caracteres`)
       novocadastro.f_senha.focus();
       return false;
   }
   if(rep_senha.length < 5){
       alert (`Preencha o campo confirma senha com no minimo 6 caracteres`)
       novocadastro.f_senhaconfirma.focus();
       return false;
   }
   if(senha != rep_senha){
       alert (`As senhas sao diferentes!`)
       novocadastro.f_senhaconfirma.focus();
       return false;
   }
}
<div class="nova-conta">
    <h2>Cadastre-se</h2>
    <form method="POST" action="cadastro.php" name="novocadastro"  >
        <div class="form-group">
            <label for="email" class="control-label">E-mail:</label>
            <input type="email" name="f_email" placeholder="Digite seu E-mail" class="form-control" id="email" data-error="Por favor, informe um e-mail correto." required>
        </div>

        <div class="form-group">
            <label for="senha" class="control-label">Senha:</label>
            <input type="password" name="f_senha" placeholder="Digite sua Senha"  class="form-control" id="f_senha" size="20" required>
        </div>
        <div class="form-group">
                <label for="senha" class="control-label">Repita a senha:</label>
                <input type="password" name="f_senhaconfirma" placeholder="Confirme Senha"  class="form-control" id="f_senhaconfirma" size="20"  required>
            </div>
       <div id="btn-conta"> 

        <a href="Index.html" class="btn btn-default"> Cancelar</a>
        <button type="submit" onclick="return validarsenha()" class="btn btn-primary">Cadastrar</button>

       </div>
    </form>
</div>

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 .