Having problems with confirm password jquery code

Question

I've found some similar questions. However I'm still having trouble fixing this. I am having troubles with my confirm password validation. If I write something in the password input and then write the same password in my cpassword input, it validates the cpassword. However if I delete a letter from my password, the cpassword still thinks it got it right.

This is my cpassword-check.js

// Validate confirm password while typing
$(document).ready(function() {    
    $('#cpassword').click(function(){  
        var cpassword = $('#cpassword').val(); 
        if (cpassword.length > 0) {  
            $("#resultcpass").html('<i class="fa fa-circle-o-notch fa-spin loading-icon"></i>');
            $.ajax({
                type : 'POST',
                url  : 'cpassword-check.php',
                data : {
                    cpassword: $('#cpassword').val(), 
                    password: $('#password').val()
                }, 
                success : function(data) {
                    $("#resultcpass").html(data);
                }
            });
            return false;

        } else {
            $("#resultcpass").html('');
        }
    });
});

And this is where it validates it (cpassword-check.php):

/*$host="localhost";
$user="root";
$pass="";
$dbname="lr";

$dbcon = new PDO("mysql:host={$host};dbname={$dbname}",$user,$pass);*/

if($_POST['cpassword']) {
    $cpassword = strip_tags($_POST['cpassword']);
    $password = strip_tags($_POST['password']);

    if ( $cpassword != $password) {
        echo "<i class='fa fa-circle user-validation-w pull-right' aria-hidden='true'></i><span class='availability pull-right'> Deben coincidir</span>";
    } else  {
        echo "<i class='fa fa-check user-validation-ok pull-right' aria-hidden='true'></i><span class='availability pull-right'></span>";
    }
}

Would you please help me to execute that function every second or maybe do something else to validate the cpassword even if the password changes?

Thank you!

Answer 1

You have applied validation only on click event of cpassword field, however the same should be applied to both as

// Validate confirm password while typing

$(document).ready(function()
{    
 $('#cpassword').click(function(){
  validatePass();
});

 $('#password').click(function(){
  validatePass();
});

function validate(){
   var cpassword = $('#cpassword').val(); 

    if (cpassword.length > 0)
  {  
    $("#resultcpass").html('<i class="fa fa-circle-o-notch fa-spin loading-icon"></i>');


          /*$.post("email-check.php", $("#reg-form").serialize())
           .done(function(data){
            $("#resultmail").html(data);
           });*/

 $.ajax({

type : 'POST',
url  : 'cpassword-check.php',
data : {

    cpassword: $('#cpassword').val(), 
    password: $('#password').val()

    }, 

success : function(data)
    {
          $("#resultcpass").html(data);
       }
});
return false;

  }
  else
  {
  $("#resultcpass").html('');
  }

 });
}

Answer 2

Bind function to check password on keypress event.

Answer 3

Simply use Jquery for it.

$(document).ready(function() {
  $("#register").on('click', function() {
    password = $.trim($("#password").val());
    repassword = $.trim($("#repassword").val());
    var msg = "";
    if (password != repassword) {
      msg += " <p>Password did not match</p>";
    }
    if (msg == "") {
      $("#register_form").submit();
    } else {
      $("#msg").html(msg); // show error message
    }
  });
});