password validation in jquery

Question

i am sorry guys i am going to paste quite a messy code but help me if you can actually i am implementing a password change functionality in which on change password button's onclientclick event i am calling a javascript function in which i am validating three things

1. whether the current password matches with the old password(via ajax call)
2. and the new password and confirm password field contains same data or not.
3. and of course whether any of the fields are blank or not

the second and third are working fine but in first case even the password didnt matches with the old password while the other criteria are fulfilled it is changing the password

the javascript function is

function check() {
var isValid = true;
    // Validate User Information.
    if ($("input[id$='txtBoxPasswrd']").val().length >= 0 && $("input[id$='txtBoxPasswrd']").val().trim() != "") {
        $.ajax({
            type: "POST",
            url: "UserProfile.aspx/CheckCurrentUserPassword",
            data: "{'userPasswrd':'" + $("input[id$='txtBoxPasswrd']").val() + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                if (msg.d != null) {
                    var result = eval(msg.d);
                    if (result.toString() == "true") {
                        $("input[id$='txtBoxPasswrd']").next()
                       .removeClass()
                       .addClass('success')
                       .text("Ok");
                    }
                    else {
                        $("input[id$='txtBoxPasswrd']").next()
                       .removeClass()
                       .addClass('failure')
                       .fadeIn('slow')
                       .text("Password doesn't match with your old password");

                        isValid = false;
                    }
                }
            }
        });
    }
    else {
        $("input[id$='txtBoxPasswrd']").next()
                       .removeClass()
                       .addClass('failure')
                       .fadeIn('slow')
                       .text("Can't be blank.");
        isValid = false;
    }
    if ($("input[id$='txtNewPassword']").val().length > 0 && $("input[id$='txtNewPassword']").val().trim() != " ") {
        if ($("input[id$='txtConfirm']").val().length > 0 && $("input[id$='txtNewPassword']").val() != $("input[id$='txtConfirm']").val()) {
            $('#txtConfirm').next()
                                        .removeClass()
                                        .addClass('failure')
                                        .fadeIn('slow')
                                        .text("Password doesn't match.");
            isValid = false;
        }
        else {
            $("input[id$='txtNewPassword']").next()
                                 .removeClass()
                                 .addClass('success')
                                 .fadeIn('slow')
                                 .text("Ok");
        }
    }
    else {
        $("input[id$='txtNewPassword']").next()
                             .removeClass()
                             .addClass('failure')
                             .fadeIn('slow')
                             .text("Can't be blank.");
        isValid = false;
    }
    if ($("input[id$='txtConfirm']").val().length == 0 || $("input[id$='txtConfirm']").val().trim() == "") {
        $("input[id$='txtConfirm']").next()
                             .removeClass()
                             .addClass('failure')
                             .fadeIn('slow')
                             .text("Can't be blank.");
        isValid = false;
    }
    return isValid;
}

the method written in ajax call is OK as it is returning the proper error message. it is some how returning the isValid to true, removing the ajax call method it is working fine for other two validations. what am i doing wrong here??

-thanks mac

Answer 1

the easiest way to implement validation with good looking error prompt is eVal plugin of jquery to reduce the over head of the server interaction.

have a look on following links.

http://code.google.com/p/jquery-jval/

jQuery and jVal Validation Plug-in. Adding an attribute to an element

http://code.google.com/p/jquery-jval/source/browse/trunk/jVal.html

and if you want to use javascript and jquery only then go for Javascript RegEx. Have a look on javascript Regular expression and impleement a method that validate your input.

if you want to follow the same use the success: and error: attributes of .ajax() and get your returned information in success with msg.d that you send back to ajax request.

Answer 2

modified the ajax call to make it work

var html =  $.ajax({
            type: "POST",
            url: "UserProfile.aspx/CheckCurrentUserPassword",
            data: "{'userPasswrd':'" + $("input[id$='txtBoxPasswrd']").val() + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async:false
        }).responseText;

        if (html.toString().indexOf("false") >= 0) {
            isValid = false;
        }
        else {
            $("input[id$='txtBoxPasswrd']").next()
                       .removeClass()
                       .addClass('success')
                       .fadeIn('slow')
                       .text("Ok");
        }
    }