match the passwords

I have a piece of code for the password match. I want to verify every character with password field while typing in confirm password field.

    var 开发者_如何学编程npass = $('#password');
    var rpass = $('#confirmpassword');
    if( npass.val() != rpass.val() ) {
        Val.errors = true;
        Val.showerrors = true;
        $("#confirmpasswordError").html("must match");
        $("#confirmpasswordError").addClass('error-Yes-msg').show();
        $("#confirmpassword").addClass('error-input');
        return false;
    } else {
        $("#confirmpasswordError").removeClass('error-msg').html('');
        $("#confirmpassword").removeClass('error-input');
    }

You've got it. You just need to bind it to the keyup/keydown event of the boxes.

Live Demo: http://jsfiddle.net/FPNBe/2/

$('#password, #confirmpassword').keyup(function() { checkPass(); } );


function checkPass(){
    var rpass = $('#confirmpassword').val();
    var npass = $('#password').val();
    if(npass!= rpass) {
        //Val.errors = true;
        //Val.showerrors = true;
        $("#confirmpasswordError").html("must match");
        //$("#confirmpasswordError").addClass('error-Yes-msg').show();
        //$("#confirmpassword").addClass('error-input');
        return false;
    } else {
        $("#confirmpasswordError").html("match!");
        //$("#confirmpasswordError").removeClass('error-msg').html('');
        //$("#confirmpassword").removeClass('error-input');
    }
}

It seems like you should just bind this code to $("#confirmpassword").keydown()

Your question is very vague. Is there some error in the code? Are you not getting the result you expect? What are you seeing? Provided your password fields really have the id values (not names) "password" and "confirmpassword", and provided they're input elements or similar, then fundamentally that should work, except:

1. You're returning false when they don't match, but not returning true when they do (at least, not in your quoted code). So if this is in a function you're calling, and you're checking the return value, you're going to see a falsey value either way.
2. You're adding the class error-Yes-msg when they don't match, but not removing it when they do (you're removing error-msg instead).
3. You're not clearing Val.errors and Val.showerrors when they match.

Addressing those and doing a bit of tidying up:

var npass = $('#password');
var rpass = $('#confirmpassword');
var match = npass.val() == rpass.val();
Val.errors = Val.showerrors = !match;

if(match) {
    $("#confirmpasswordError").removeClass('error-Yes-msg').html('');
    $("#confirmpassword").removeClass('error-input');
} else {
    $("#confirmpasswordError")
        .html("must match")
        .addClass('error-Yes-msg').show();
    $("#confirmpassword").addClass('error-input');
}
return match;

It would seem like .keyup()/.keydown() would work, but its kinda tricky sometimes. So, try this plugin from Zurb. It works like a charm.

Now, your code should be something like this:

var npass = $('#password');
var rpass = $('#confirmpassword');

rpass.bind('textchange', function (event, previousText) {
    if( npass.val() != rpass.val() ) {
        Val.errors = true;
        Val.showerrors = true;
        $("#confirmpasswordError").html("must match");
        $("#confirmpasswordError").addClass('error-Yes-msg').show();
        $("#confirmpassword").addClass('error-input');
        return false;
    } else {
        $("#confirmpasswordError").removeClass('error-msg').html('');
        $("#confirmpassword").removeClass('error-input');
    }
});