Jquery Validate and Ajax Call

I have a little project, which allows customers to change their password.

When customer fulfill the textbox, and click the button, there will be a ajax call, and on success, return something.

This function works great. However, when I tried to add a Jquery validate plugin, the plugin doesn't work at all.

Here is my code.

$(document).ready(function () {
  ValideteForm();

$("#btnChangePassword").click(function (e) {

    var oldPassword = $("#txtOldPassword").val();
    var newPassword = $("#txtNewPassword").val();
    var userID = parseInt($("#txtUserID").val());
    e.preventDefault();
    ChangePassword(userID, oldPassword, newPassword);

   });
});

function ChangePassword(UserID, OldPassword, NewPassword) {

$.ajax({
    type: "POST",
    url: "/WebServices/EditUserInformation.asmx/ChangePassword",
    data: '{"UserID":"' + UserID + '","OldPassword":"' + OldPassword + '","NewPassword":"' + NewPassword + '"}',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) {
        $("#UpdateResult").hide();
        $("#UpdateResult").fadeIn(300);
        $("#UpdateResu开发者_Python百科lt").html(msg.d);
        $("#UpdateResult").fadeOut(5000)
    },
    error: function () {
        alert("Error Happened");
    }
  });
}


function ValideteForm() {
$("#passwordForm").validate(
{
    rules: {
        txtOldPassword: {
            required: true
        },
        txtNewPassword: {
            required: true
        },
        txtConfirmNewPassword: {
            required: true,
            equalTo: "#txtNewPassword"
        }
    },
    messages: {
        txtOldPassword: {
            required: "Please enter old password"
        },
        txtNewPassword: {
            required: "Please enter your new password"
        },
        txtConfirmNewPassword: {
            required: "Please re-enter your password",
            equalTo: "Please enter the same password as above" 
        }
    }
});
}

What should I do? Any help please? Thanks a lot!

Use jqueryValidateEngine

Here is the Demo URL,

http://www.position-relative.net/creation/formValidator/demos/demoValidators.html

EX: 
$("[class^=validate]").validationEngine({
           success: false,
           failure : function() {      
               }
});

Your HTML should be ,
<input type="text" name="username" class="validate[required]">

Add both validation of the form in button click and in the success of form validation call the method via ajax request.

$("#passwordForm").validate(
{

    submitHandler: function (form) {
        var oldPassword = $("#txtOldPassword").val();
        var newPassword = $("#txtNewPassword").val();
        var userID = parseInt($("#txtUserID").val());    
        ChangePassword(userID, oldPassword, newPassword);
    },

    rules: {
        txtOldPassword: {
            required: true
        },
        txtNewPassword: {
            required: true
        },
        txtConfirmNewPassword: {
            required: true,
            equalTo: "#txtNewPassword"
        }
    },
    messages: {
        txtOldPassword: {
            required: "Please enter old password"
        },
        txtNewPassword: {
            required: "Please enter your new password"
        },
        txtConfirmNewPassword: {
            required: "Please re-enter your password",
            equalTo: "Please enter the same password as above" 
        }
    }
});