具有远程验证MVC 3的jQuery验证组

时间:2012-05-30 14:03:33

标签: jquery asp.net-mvc-3 jquery-validate remote-validation

我想用3个选择器中的RemoteValidation / jQuery验证出生日期。我想检查用户是否年满18周岁。但是我在组合它们时遇到了一些麻烦,因此它们无效/有效并且只有一个错误消息。

目标:当您更改其中任何一个时,我希望将所有3个元素作为一个组(jquery验证程序组)验证,并使用相同的RemoteValidation。

任何人都知道如何解决这个问题?

查看:

@Html.DropDownListFor(m => m.BirthYear, Model.BirthYearList)
@Html.DropDownListFor(m => m.BirthMonth, Model.BirthMonthList)
@Html.DropDownListFor(m => m.BirthDay, Model.BirthDayList)

模型

[Remote("IsValidCustomerBirthDate", "JsonValidation", AdditionalFields = "BirthDay, BirthMonth", ErrorMessageResourceName = "InvalidCustomerBirthDate", ErrorMessageResourceType = typeof(Error))]
[Required]
public int BirthYear { get; set; }

[Remote("IsValidCustomerBirthDate", "JsonValidation", AdditionalFields = "BirthYear,  BirthDay", ErrorMessageResourceName = "InvalidCustomerBirthDate", ErrorMessageResourceType = typeof(Error))]
[Required]
public int BirthMonth { get; set; }

[Remote("IsValidCustomerBirthDate", "JsonValidation", AdditionalFields = "BirthYear, BirthMonth", ErrorMessageResourceName = "InvalidCustomerBirthDate", ErrorMessageResourceType = typeof(Error))]
[Required]
public int BirthDay { get; set; }

RemoteValidation功能

[HttpGet]
public JsonResult IsValidCustomerBirthDate(int birthYear, int birthMonth, int birthDay)
    {
        try
        {
            var dateOfBirth = new DateTime(birthYear, birthMonth, birthDay);
            var ageCalculator = new AgeCalculator();

            if (ageCalculator.GetAge(dateOfBirth) >= AgeLimit)                   
            {
                return Json(true, JsonRequestBehavior.AllowGet);
            }
        }
        catch (ArgumentException)
        {

        }            

        return Json(false, JsonRequestBehavior.AllowGet);
    }

我一直在使用validate()中的一些群体,但没有到达任何地方。

感谢任何类型的投入。 (我是一名前端开发人员,所以如果它是复杂的C#代码,请更有启发性。)

亲切的问候/马格努斯

2 个答案:

答案 0 :(得分:0)

我只将验证放在BirthDay下拉列表中(因为是最后一个),然后在其他2个字段更改事件中触发此验证。

$("#BirthYear, #BirthMonth").change(function(e){
    $("#BirthDay").valid();
});

答案 1 :(得分:0)

我也采用与kpull1相同的方法。稍微扩展了他的答案,我写了这个帮助器方法,找到每个具有“附加字段”的远程验证元素,然后在每次其中一个字段发生变化时触发所述元素的验证。

// I hate naming things
function initializeRemotelyValidatingElementsWithAdditionalFields($form) {
    var remotelyValidatingElements = $form.find("[data-val-remote]");

    $.each(remotelyValidatingElements, function (i, element) {
        var $element = $(element);

        var additionalFields = $element.attr("data-val-remote-additionalfields");

        if (additionalFields.length == 0) return;

        var rawFieldNames = additionalFields.split(",");

        var fieldNames = $.map(rawFieldNames, function (fieldName) { return fieldName.replace("*.", ""); });

        $.each(fieldNames, function (i, fieldName) {
            $form.find("#" + fieldName).change(function () {
                // force re-validation to occur
                $element.removeData("previousValue");
                $element.valid();
            });
        });
    });
}

像这样调用函数:

$(document).ready(function() {
    initializeRemotelyValidatingElementsWithAdditionalFields($("#myFormId"));
});