2011-06-22 135 views
1

我有一个小项目,它允许客户更改他们的密码。Jquery验证和Ajax调用

当客户完成文本框,并点击按钮,将会有ajax调用,并在成功时返回一些东西。

这个功能很好用。但是,当我尝试添加Jquery validate插件时,该插件根本无法使用。

这是我的代码。

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

我该怎么办?请帮忙吗?非常感谢!

+0

不应该在调用Formate的提交时调用ValidateformI()吗?像'$(“#passwordForm”)。submit(function(){return ValidateForm(); }); – Balanivash

回答

0

使用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]"> 
+0

我遇到的问题是,我想在ajax调用之前验证火灾。这两个功能中的每一个功能都很有依赖性。当我把它们放在一起时,只有ajax调用起作用。这似乎是阿贾克斯第一次冷杉,这是不是我想要的。 – HorseKing

0

添加形式的两个验证按钮点击表单验证成功调用通过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" 
     } 
    } 
});