Question

I’d like to allow the user to type in their original password, on the Change Password page, and have the page check whether it is correct or not without a refresh. I’d like a checkbox image to appear next to the text box when the password is correct.

I have two issues, though. 1) how can this be done in a secure manner, and 2) firing an ajax call with every keypress does not seem to always catch each keypress.

This is what I have so far:

$("#oldPW").keyup(function () {
    checkPW();
});

// on keyup
function checkPW() {
    var pw = $("#oldPW").val();
    var dataSring = "pw=" + pw;
    $.ajax({
        type: "POST",
        url: "checkPW",
        data: dataSring,
        cache: false,
        success: function (data) {
            if (data== "True") {
                $("#pwok").fadeIn();
            }
            if (data== "false") {
                $("#pwok").fadeOut();
            }
        }
    });
}

I see that the problem with the above code is that the user could manually show the image, which would bypass the above “security”. I could check again after the user presses submit, but that does not address problem 1, missing keyups, and I’m not sure if it is foolproof in terms of security either.

Answer 1

For problem #1, you need to validate the password on the server side regardless. Then, you won’t have to worry about someone bypassing the client side.

As for #2, the problem is that you don’t know what order the ajax calls will complete in, so a previous call may finish after the latest call. You can handle this in a lot of ways, but one is to abort the request each time you try again:

$("#oldPW").data('lastRequest', {abort: function () {}});

function checkPW() {
    var pw = $("#oldPW").val();
    var dataSring = "pw=" + pw;
    $("#oldPW").data('lastRequest').abort();
    $("#oldPW").data('lastRequest', $.ajax({