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!

Why are you validating it with an AJAX call? You can do it in plain JavaScript, and you've to do it in PHP again anyway because you are able to remove the AJAX request in the most browsers. — N. Hamelink
– N. Hamelink, Commented Dec 27, 2016 at 8:12
is it mandatory that the password check has to be done in php or can it be done in javascript itself? — GraveyardQueen
– GraveyardQueen, Commented Dec 27, 2016 at 8:12
It's not mandatory, I just did it that way because I saw an example and I'm not very good at jscript. How can I validate it with plain js? — Diego Rios
– Diego Rios, Commented Dec 27, 2016 at 8:21

shahzeb akram · Accepted Answer · 2016-12-27 08:30:34Z

2

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

edited Dec 27, 2016 at 8:30

user6533277

answered Dec 27, 2016 at 8:20

shahzeb akram

9268 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Diego Rios Over a year ago

Thanks for the solution! but I think i'll stick to the ajax call. I know that might be a waste of time but it's working hahaha. Thanks anyways!

Rahul · Accepted Answer · 2016-12-27 08:15:27Z

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

 });
}

answered Dec 27, 2016 at 8:15

Rahul

2,4802 gold badges12 silver badges17 bronze badges

5 Comments

Diego Rios Over a year ago

i'll give it a try.

N. Hamelink Over a year ago

Using the change event on the inputs gives a much nicer effect, you're able to use the "submit" function on the parent form as well @DiegoRios

Diego Rios Over a year ago

@DevNiels would you mind giving me an example? I don't have much experience with jquery/javascript.

Rahul Over a year ago

@DiegoRios he is trying to say is that instead of click event you should use change event as $("your-field").change(function(){})

Diego Rios Over a year ago

Ohh, so everytime the field changes the function is executed. I'll try that. Thanks!

newbie · Accepted Answer · 2016-12-27 08:15:01Z

0

Bind function to check password on keypress event.

answered Dec 27, 2016 at 8:15

newbie

1372 silver badges11 bronze badges

Collectives™ on Stack Overflow

Having problems with confirm password jquery code

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related