Question

我有一个小项目，允许客户更改密码。

当客户完成文本框并单击按钮时，将会有一个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" 
        }
    }
});
}

我该怎么办？有什么帮助吗？非常感谢！

Answer 1

使用jqueryValidateEngine

以下是演示网址

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

Jquery验证和Ajax调用

2 个答案: