4

Estou usando o código que me diga se ambos emails são idênticos, se ambas senhas são idênticas e se elas tem no mínimo 8 e no máximo 10 caracteres. E somente se os emails foram iguais, senhas iguais e no tamanho correto que o botão de cadastrar do formulário aparece.

Porém como consegui usar apenas o keyup no email2 e senha2, se o usuário voltar e digitar algo na senha ou email, não muda para erro o input.

O que queria era saber como por o mesmo evento com as mesma regras do keyup do email2 e senha2 também no email e senha, para que fosse validado em ambos os campos de confirmação.

E note que nem consegui ainda restringir e validar o email, só se são ou não idênticos.

$('#email2').on('keyup', function () {
    var email = $("#email").val();
    var email2 = $("#email2").val();

    if (email != email2) {
        $("#message").html("Os email não são identicos").css('color', 'red');
        $('#validator').prop('disabled' , true);
    } else {
        $("#message").html("Os email são identicos").css('color', 'green');
        $('#validator').prop('disabled' , true);
    }
    $('#validator').prop('disabled' , true);
    $('#senha2').on('keyup', function (){
        var password = $("#senha").val();
        var confirmPassword = $("#senha2").val();
        if (password.length < 8 || password.length  > 16) { 
            $("#divCheckPassword2").html("As senhas precisam ter no minimo 8 caracteres e no máximo 16").css('color', 'red');
            $('#validator').prop('disabled' , true);
        } else {
            $("#divCheckPassword2").html("").css('color', 'green');
            $('#validator').prop('disabled' , true);
        }

        if (password != confirmPassword) {
             $("#divCheckPassword").html("As senhas não são").css('color', 'red');
             $('#validator').prop('disabled' , true);
        } else {
            $("#divCheckPassword").html("Senhas identicas").css('color', 'green');
            $('#validator').prop('disabled' , true);
        }

        if (password != confirmPassword ||  password.length < 8 || 
            password.length  > 16 || email != email2){
            $('#validator').prop('disabled' , true);
        } else {
            $('#validator').prop('disabled' , false);
        }
    })
});

2 Respostas 2

4

Você pode fazer desta forma, o código foi explicado através dos comentários.

//Iniciar script somente depois de carregar todo o html(dom)
$(function(){

  $('#validator').prop('disabled', true);

  //Separa a validação de e-mail
  function validarEmail(){
  
    var email = $("#email");
    var email2 = $("#email2");
  
    if (email.val() != email2.val()) {
      $("#message").html("Os email não são identicos").css('color', 'red');
      $('#validator').prop('disabled', true);
    } else {
      $("#message").html("Os email são identicos").css('color', 'green');
      $('#validator').prop('disabled', true);
    }
  }

  //Separa a validação de senha
  function validarSenha(){
  
    var senha = $("#senha");
    var senha2 = $("#senha2");
    
    var minLength = 8;
    var maxLength = 10;
    
    if (senha.val().length < minLength || senha.val().length > maxLength) {
      $("#divCheckPassword2").html("As senhas precisam ter no minimo " + minLength + " caracteres e no máximo " + maxLength).css('color', 'red');
      $('#validator').prop('disabled', true);
    }
    else {
      $('#validator').prop('disabled', true);
      $("#divCheckPassword2").html("" + minLength + " caracteres e no máximo " + maxLength).css('color', 'green');
    }
    
    if (senha.val() != senha2.val()) {
      $("#divCheckPassword").html("As senhas não são iguais").css('color', 'red');
      $('#validator').prop('disabled', true);
    } else {
      $("#divCheckPassword").html("Senhas identicas").css('color', 'green');
      $('#validator').prop('disabled', true);
    }
  }
  
  /**
  * Os eventos foram separados, já que o evento keyup da "senha2" 
  * só funcionária caso o evento de "email2" fosse acionado 
  * em conjunto, o que não aconteceria 
  *
  * Assim você chama a função em qualquer elemento adicionando
  * os eventos que desejar, e ao alterar o código de alguma regra
  * esta mudança será somenta na função reponsável pela aquela
  * validação.
  */
  
  $('#email').on('keyup', function() {
    validarEmail();
    validarSenha();
  });

  $('#senha').on('keyup', function() {
    validarEmail();
    validarSenha();
  });
  
  $('#email2').on('keyup', function() {
    validarEmail();
    validarSenha();
  });

  $('#senha2').on('keyup', function() {
    validarEmail();
    validarSenha();
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="validator">
  <div id="validator">

  </div>
  <div id="divCheckPassword">

  </div>
  <div id="divCheckPassword2">

  </div>  
</div>

<div>
    <label for="email">E-mail:</label>
    <input type="email" id="email" name="email">
</div>

<div>
    <label for="email2">Confirmar e-mail:</label>
    <input type="email" id="email2" name="email2">
</div>
<div>
    <label for="senha">Senha (minimo 8 e máximo 10):</label>
    <input type="password" id="senha" name="senha"
           minlength="8" required>
</div>

<div>
    <label for="senha2">Confirmar senha (minimo 8 e máximo 10):</label>
    <input type="password" id="senha2" name="senha2"
           minlength="8" required>
</div>

7
  • Obrigado amigo, mas agora ele não da a validação apra a senha, memso que tenha mais de 8 caracteres e sejam identicas, para tudo na parte de erro das senhas Commented 20/01/2019 às 13:19
  • certo deu perfeito, mais como validar agora essa parte com ele codefunction validar(){ if (email != email2.val() || senha.val().length < 8 || senha.val().length > 16 || senha.val() != senha2.val()){ $('#validator').prop('disabled' , true); }else { $('#validator').prop('disabled' , false); } }code Commented 20/01/2019 às 13:57
  • eu não mexi na parte da validação, somente nos eventos, copia a sua validação, mas de qualquer forma, vou alterar :) Commented 20/01/2019 às 14:05
  • só poso agradecer a sua ajuda amigo Commented 20/01/2019 às 14:13
  • 1
    muito obrigado amigo, salvou minha vida Commented 20/01/2019 às 14:29
3

Acho que você pode separar os eventos para cada tipo de validação: de email e de senha:

$('#email, #email2').on('keyup', validarEmail); // chama a função ref. ao email
$('#senha, #senha2').on('keyup', validarSenha); // chama a função ref. à senha

E usar uma função para controlar o botão de cadastrar:

function valida(){

   $('#validator')
   .prop('disabled', val_email && val_senha && val_senha2 ? false : true);

}

Esse função será chamada nos eventos keyup e só irá habilitar o botão se as 3 variáveis (val_email, val_senha e val_senha2) forem true.

Outro detalhe é o botão já vir com o atributo disabled no HTML:

<button id="validator" disabled>Cadastrar</button>
                          ↑

Veja exemplo:

$(function(){

   // declaro variáveis de controle
   var val_email, val_senha, val_senha2;
   
   function valida(){
      
      $('#validator')
      .prop('disabled', val_email && val_senha && val_senha2 ? false : true);
      
   }

   function validarEmail(){
  
      var email = $("#email").val().trim();
      var email2 = $("#email2").val().trim();

      // só irá verificar se os campos tiverem algo  
      if(email && email2){
         if(email != email2){

            $("#message")
            .html("Os emails não são idênticos")
            .css('color', 'red');
            val_email = false;

         }else{

            $("#message")
            .html("Os emails são idênticos")
            .css('color', 'green');
            val_email = true;

         }

         // chama a função de controle do botão
         valida();

      }

   }

   function validarSenha(){

      var senha = $("#senha").val();
      var senha2 = $("#senha2").val();

      // só irá verificar se os campos tiverem algo
      if(senha && senha2){
    
         if(senha.length < 8 || senha.length > 10){
   
            $("#divCheckPassword2")
            .html("As senhas precisam ter no mínimo 8 caracteres e no máximo 10")
            .css('color', 'red');
            val_senha = false;
   
         }else{
   
            $("#divCheckPassword2")
            .html("8 caracteres e no máximo 10")
            .css('color', 'green');
            val_senha = true;
   
         }
       
         if(senha != senha2){
   
            $("#divCheckPassword")
            .html("As senhas não são iguais")
            .css('color', 'red');
            val_senha2 = false;
   
         }else{
   
            $("#divCheckPassword").html("Senhas idênticas")
            .css('color', 'green');
            val_senha2 = true;
         }
         
         // chama a função de controle do botão
         valida();

      }
   }
  
   $('#email, #email2').on('keyup', validarEmail);
   $('#senha, #senha2').on('keyup', validarSenha);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
E-mail: <input type="email" id="email" autofocus>
<br>
Confirmar e-mail: <input type="email" id="email2">
<br>
<div id="message"></div>
<br><br>
Senha: <input type="password" id="senha">
<br>
Confirmar senha: <input type="password" id="senha2">
<br>
<div id="divCheckPassword"></div>
<div id="divCheckPassword2"></div>
<br>
<button id="validator" disabled>Cadastrar</button>

3
  • Gostei bastante da sua lógica, mas alterei o código lá em cima, se tivesse usando tbm para ver se o email é valido, e adicionando essa verificação para ativar o botão de cadastro, teria como? Commented 20/01/2019 às 23:26
  • Poderia fazer desta forma: jsfiddle.net/mohqz12k
    – Sam
    Commented 20/01/2019 às 23:35
  • amigo, virei seu fã, perfeito!!!!!! Commented 22/01/2019 às 14:04

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 .