JQuery对字段数组进行不显眼的验证 - 仅连接到第一个字段？

时间：2013-11-15 13:13:34

标签： javascript jquery asp.net-mvc validation unobtrusive-validation

我坚持为字段数组添加自定义不显眼的验证 - 数据验证属性仅连接到第一个元素（索引为0）。你能帮忙吗？感谢。

服务器端：

public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        string errorMessage = ErrorMessageString;

        ModelClientValidationRule timeLessThanRule = new ModelClientValidationRule();
        timeLessThanRule.ErrorMessage = errorMessage;
        timeLessThanRule.ValidationType = "timelessthan";
        timeLessThanRule.ValidationParameters.Add("otherpropertyname", _otherPropertyName);

        yield return timeLessThanRule;
    }

查看： 

@for (int i = 0; i < 7; i++)
{
    <div class="form-field">
        @Html.HiddenFor(x => Model.StoreWorkingHours.FirstOrDefault(y => (int)y.DayInWeek == i + 1 && y.IntervalInDay == IntervalInDay.IntervalOne).Id, new { @id = "StoreWorkingHours_" + i + "__Id", Name = "StoreWorkingHours[" + i + "].Id" })
        @Html.HiddenFor(x => Model.StoreWorkingHours.FirstOrDefault(y => (int)y.DayInWeek == i + 1 && y.IntervalInDay == IntervalInDay.IntervalOne).DayInWeek, new { @id = "StoreWorkingHours_" + i + "__DayInWeek", Name = "StoreWorkingHours[" + i + "].DayInWeek" })
        @Html.HiddenFor(x => Model.StoreWorkingHours.FirstOrDefault(y => (int)y.DayInWeek == i + 1 && y.IntervalInDay == IntervalInDay.IntervalOne).IntervalInDay, new { @id = "StoreWorkingHours_" + i + "__IntervalInDay", Name = "StoreWorkingHours[" + i + "].IntervalInDay" })
        @Html.TextBoxFor(x => Model.StoreWorkingHours.FirstOrDefault(y => (int)y.DayInWeek == i + 1 && y.IntervalInDay == IntervalInDay.IntervalOne).From, new { @class = "w-50 openedfrom", @id = "StoreWorkingHours_" + i + "__From", Name = "StoreWorkingHours[" + i + "].From" })
        <span class="field-validation">@Html.ValidationMessageFor(x => Model.StoreWorkingHours.FirstOrDefault(y => (int)y.DayInWeek == i + 1 && y.IntervalInDay == IntervalInDay.IntervalOne).From, "", new { @data_valmsg_for = "StoreWorkingHours[" + i + "].From" })</span>
        @Html.TextBoxFor(x => Model.StoreWorkingHours.FirstOrDefault(y => (int)y.DayInWeek == i + 1 && y.IntervalInDay == IntervalInDay.IntervalOne).Until, new { @class = "w-50 openeduntil", @id = "StoreWorkingHours_" + i + "__Until", Name = "StoreWorkingHours[" + i + "].Until"})
        <span class="field-validation">@Html.ValidationMessageFor(x => Model.StoreWorkingHours.FirstOrDefault(y => (int)y.DayInWeek == i + 1 && y.IntervalInDay == IntervalInDay.IntervalOne).Until, "", new { @data_valmsg_for = "StoreWorkingHours[" + i + "].Until" })</span>
    </div>
}

自定义验证脚本：

 $.validator.addMethod("timelessthan", function (value, element, params) {

    var index = ($(params).selector).split("[")[1].charAt(0);

    var tf = $("#StoreWorkingHours_" + index + "__Until").val();
    var tu = value;

    var until = new Date("01/01/2014 " + tu);
    var from = new Date("01/01/2014 " + tf);

    return until < from;
    });


    $.validator.unobtrusive.adapters.add("timelessthan", ["otherpropertyname"], function (options) {
    options.rules["timelessthan"] = "#" + options.params.otherpropertyname;
    options.messages["timelessthan"] = options.message;
    });

结果：

<div class="form-field">
    <input type="hidden" value="97" id="StoreWorkingHours_0__Id" name="StoreWorkingHours[0].Id">
    <input type="hidden" value="Monday" id="StoreWorkingHours_0__DayInWeek" data-val-required="The DayInWeek field is required." data-val="true" name="StoreWorkingHours[0].DayInWeek">
    <input type="hidden" value="IntervalOne" id="StoreWorkingHours_0__IntervalInDay" data-val-required="The IntervalInDay field is required." data-val="true" name="StoreWorkingHours[0].IntervalInDay">
    <input type="text" value="" id="StoreWorkingHours_0__From" data-val-timelessthan-otherpropertyname="Until" data-val-timelessthan="From must be less than Until" data-val="true" class="w-50 openedfrom hasTimepicker" name="StoreWorkingHours[0].From">
    <span class="field-validation"><span data-valmsg-replace="true" data-valmsg-for="StoreWorkingHours[0].From" class="field-validation-valid"></span></span>
    <input type="text" value="" id="StoreWorkingHours_0__Until" data-val-timegreaterthan-otherpropertyname="From" data-val-timegreaterthan="Until must be greater than From" data-val="true" class="w-50 openeduntil hasTimepicker" name="StoreWorkingHours[0].Until">
    <span class="field-validation"><span data-valmsg-replace="true" data-valmsg-for="StoreWorkingHours[0].Until" class="field-validation-valid"></span></span>
</div>
<div class="form-field">
    <input type="hidden" value="97" id="StoreWorkingHours_1__Id" name="StoreWorkingHours[1].Id">
    <input type="hidden" value="Tuesday" id="StoreWorkingHours_1__DayInWeek" name="StoreWorkingHours[1].DayInWeek">
    <input type="hidden" value="IntervalOne" id="StoreWorkingHours_1__IntervalInDay" name="StoreWorkingHours[1].IntervalInDay">
    <input type="text" value="" id="StoreWorkingHours_1__From" class="w-50 openedfrom hasTimepicker" name="StoreWorkingHours[1].From">
    <span class="field-validation"><span data-valmsg-replace="true" data-valmsg-for="StoreWorkingHours[1].From" class="field-validation-valid"></span></span>
    <input type="text" value="" id="StoreWorkingHours_1__Until" class="w-50 openeduntil hasTimepicker" name="StoreWorkingHours[1].Until">
    <span class="field-validation"><span data-valmsg-replace="true" data-valmsg-for="StoreWorkingHours[1].Until" class="field-validation-valid"></span></span>
</div>
<div class="form-field">
    <input type="hidden" value="97" id="StoreWorkingHours_2__Id" name="StoreWorkingHours[2].Id">
    <input type="hidden" value="Wednesday" id="StoreWorkingHours_2__DayInWeek" name="StoreWorkingHours[2].DayInWeek">
    <input type="hidden" value="IntervalOne" id="StoreWorkingHours_2__IntervalInDay" name="StoreWorkingHours[2].IntervalInDay">
    <input type="text" value="" id="StoreWorkingHours_2__From" class="w-50 openedfrom hasTimepicker" name="StoreWorkingHours[2].From">
    <span class="field-validation"><span data-valmsg-replace="true" data-valmsg-for="StoreWorkingHours[2].From" class="field-validation-valid"></span></span>
    <input type="text" value="" id="StoreWorkingHours_2__Until" class="w-50 openeduntil hasTimepicker" name="StoreWorkingHours[2].Until">
    <span class="field-validation"><span data-valmsg-replace="true" data-valmsg-for="StoreWorkingHours[2].Until" class="field-validation-valid"></span></span>
</div>
<div class="form-field">
    <input type="hidden" value="97" id="StoreWorkingHours_3__Id" name="StoreWorkingHours[3].Id">
    <input type="hidden" value="Thursday" id="StoreWorkingHours_3__DayInWeek" name="StoreWorkingHours[3].DayInWeek">
    <input type="hidden" value="IntervalOne" id="StoreWorkingHours_3__IntervalInDay" name="StoreWorkingHours[3].IntervalInDay">
    <input type="text" value="" id="StoreWorkingHours_3__From" class="w-50 openedfrom hasTimepicker" name="StoreWorkingHours[3].From">
    <span class="field-validation"><span data-valmsg-replace="true" data-valmsg-for="StoreWorkingHours[3].From" class="field-validation-valid"></span></span>
    <input type="text" value="" id="StoreWorkingHours_3__Until" class="w-50 openeduntil hasTimepicker" name="StoreWorkingHours[3].Until">
    <span class="field-validation"><span data-valmsg-replace="true" data-valmsg-for="StoreWorkingHours[3].Until" class="field-validation-valid"></span></span>
</div>
<div class="form-field">
    <input type="hidden" value="97" id="StoreWorkingHours_4__Id" name="StoreWorkingHours[4].Id">
    <input type="hidden" value="Friday" id="StoreWorkingHours_4__DayInWeek" name="StoreWorkingHours[4].DayInWeek">
    <input type="hidden" value="IntervalOne" id="StoreWorkingHours_4__IntervalInDay" name="StoreWorkingHours[4].IntervalInDay">
    <input type="text" value="" id="StoreWorkingHours_4__From" class="w-50 openedfrom hasTimepicker" name="StoreWorkingHours[4].From">
    <span class="field-validation"><span data-valmsg-replace="true" data-valmsg-for="StoreWorkingHours[4].From" class="field-validation-valid"></span></span>
    <input type="text" value="" id="StoreWorkingHours_4__Until" class="w-50 openeduntil hasTimepicker" name="StoreWorkingHours[4].Until">
    <span class="field-validation"><span data-valmsg-replace="true" data-valmsg-for="StoreWorkingHours[4].Until" class="field-validation-valid"></span></span>
</div>
<div class="form-field">
    <input type="hidden" value="97" id="StoreWorkingHours_5__Id" name="StoreWorkingHours[5].Id">
    <input type="hidden" value="Saturday" id="StoreWorkingHours_5__DayInWeek" name="StoreWorkingHours[5].DayInWeek">
    <input type="hidden" value="IntervalOne" id="StoreWorkingHours_5__IntervalInDay" name="StoreWorkingHours[5].IntervalInDay">
    <input type="text" value="" id="StoreWorkingHours_5__From" class="w-50 openedfrom hasTimepicker" name="StoreWorkingHours[5].From">
    <span class="field-validation"><span data-valmsg-replace="true" data-valmsg-for="StoreWorkingHours[5].From" class="field-validation-valid"></span></span>
    <input type="text" value="" id="StoreWorkingHours_5__Until" class="w-50 openeduntil hasTimepicker" name="StoreWorkingHours[5].Until">
    <span class="field-validation"><span data-valmsg-replace="true" data-valmsg-for="StoreWorkingHours[5].Until" class="field-validation-valid"></span></span>
</div>
<div class="form-field">
    <input type="hidden" value="97" id="StoreWorkingHours_6__Id" name="StoreWorkingHours[6].Id">
    <input type="hidden" value="Sunday" id="StoreWorkingHours_6__DayInWeek" name="StoreWorkingHours[6].DayInWeek">
    <input type="hidden" value="IntervalOne" id="StoreWorkingHours_6__IntervalInDay" name="StoreWorkingHours[6].IntervalInDay">
    <input type="text" value="" id="StoreWorkingHours_6__From" class="w-50 openedfrom hasTimepicker" name="StoreWorkingHours[6].From">
    <span class="field-validation"><span data-valmsg-replace="true" data-valmsg-for="StoreWorkingHours[6].From" class="field-validation-valid"></span></span>
    <input type="text" value="" id="StoreWorkingHours_6__Until" class="w-50 openeduntil hasTimepicker" name="StoreWorkingHours[6].Until">
    <span class="field-validation"><span data-valmsg-replace="true" data-valmsg-for="StoreWorkingHours[6].Until" class="field-validation-valid"></span></span>
</div>

1 个答案:

答案 0 :(得分：1)

从视图中删除这些自定义htmlAttribute。 Razor将为您自动创建它。

查看 

@for (int i = 0; i < 7; i++)
{
    <div class="form-field">
        @Html.HiddenFor(x => Model.StoreWorkingHours.FirstOrDefault(y => (int)y.DayInWeek == i + 1 && y.IntervalInDay == IntervalInDay.IntervalOne).Id)
        @Html.HiddenFor(x => Model.StoreWorkingHours.FirstOrDefault(y => (int)y.DayInWeek == i + 1 && y.IntervalInDay == IntervalInDay.IntervalOne).DayInWeek)
        @Html.HiddenFor(x => Model.StoreWorkingHours.FirstOrDefault(y => (int)y.DayInWeek == i + 1 && y.IntervalInDay == IntervalInDay.IntervalOne).IntervalInDay)
        @Html.TextBoxFor(x => Model.StoreWorkingHours.FirstOrDefault(y => (int)y.DayInWeek == i + 1 && y.IntervalInDay == IntervalInDay.IntervalOne).From)
        <span class="field-validation">@Html.ValidationMessageFor(x => Model.StoreWorkingHours.FirstOrDefault(y => (int)y.DayInWeek == i + 1 && y.IntervalInDay == IntervalInDay.IntervalOne).From)</span>
        @Html.TextBoxFor(x => Model.StoreWorkingHours.FirstOrDefault(y => (int)y.DayInWeek == i + 1 && y.IntervalInDay == IntervalInDay.IntervalOne).Until)
        <span class="field-validation">@Html.ValidationMessageFor(x => Model.StoreWorkingHours.FirstOrDefault(y => (int)y.DayInWeek == i + 1 && y.IntervalInDay == IntervalInDay.IntervalOne).Until)</span>
    </div>
}

并在自定义验证脚本上，将其更改为：

$.validator.addMethod("timelessthan", function (value, element, params) {
    console.log("HI :)");
    return false;
});

$.validator.unobtrusive.adapters.add("timelessthan", ["otherpropertyname"], function (options) {
    options.rules["timelessthan"] = "#" + options.params.otherpropertyname;
    options.messages["timelessthan"] = options.message;
});

这样做你会看到它是否真的被调用了。如果没关系，我认为"#" + options.params.otherpropertyname不会给你预期的结果。所以你也必须改变它。

相关问题
最新问题