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

Добавьте проверку формы нажатием кнопки, а при успешной проверке формы вызовите метод через 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" 
        }
    }
});

Answer 2

Использовать jqueryValidateEngine

Вот демонстрационный URL,

http://www.position -relative.net / создание / formValidator / демки / demoValidators.html

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

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