Jquery ValidateとAjax Call

Question

私は顧客が自分のパスワードを変更できる小さなプロジェクトを持っています。

お客様がテキストボックスを満たしてボタンをクリックすると、ajaxコールがあり、成功した場合は何かを返します。

この機能はうまく機能します。しかし、Jqueryの検証プラグインを追加しようとすると、プラグインはまったく動作しません。

ここに私のコードです。

$(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); 
     $("#UpdateResult").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" 
     } 
    } 
}); 
} 

どうすればよいですか？助けてください？どうもありがとう！

Answer 1

使用jqueryValidateEngine

ここでデモ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]"> 

Answer 2

は、ボタンのクリックで、フォームの検証の成功に形の両方の検証を追加されたAJAXリクエストを経由してメソッドを呼び出します。

$("#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" 
     } 
    } 
});