Question

我目前正在开发一个需要根据用户输入动态添加视图/更改视图的网站。根据用户在下拉框中选择的内容，我在页面上呈现部分视图。对于大多数观点，这是有效的;但是，我有一个局部视图，可以选择生成多个字段集。当只有一个字段集时，不显眼的验证工作（读取：用户不选择添加更多的选项），但是当用户生成更多字段集时，验证仅针对第一个集合触发。在这里查看了一下之后，我发现了Xhalent关于动态不显眼验证的帖子，以及一个给我逻辑实际复制字段集的帖子。不幸的是，我在JS / jQuery上相当新（糟糕），还没有弄清楚如何让这两个想法很好地融合。

这是我用来复制表单字段的jQuery代码（我没有包含实际字段，因为这实际上是一个概念性问题，而且这些字段在这一点上是无关紧要的。另外，我真的不明白在这里格式化它们：

$(document).ready(function () {
    $("#itemCountSec1").change(function () {
        var itemCountVal = jQuery(this).val();
        $("#Section1Fields").fieldsManage(itemCountVal);

    });
});

（注意：itemCountVal是用户选择的数字1-6）

这是我保存在JS文件（Dupe.js）中的函数：

jQuery.fn.fieldsManage = function (number) {
var ele = $(this);
var clones = ele.data("clones");
clones = clones ? clones : new Array(ele.attr("id"));
if (clones.length < number) {
    var clone;
    while (clones.length < number) {
        clone = ele.clone(true);
        var id = clones[0] + clones.length;
        clone.attr("id", id);
        $("#" + clones[clones.length - 1]).after(clone);
        $.validator.unobtrusive.parseDynamicContent(clone);
        clones.push(id);
        clone.find("input").each(function () { jQuery(this).val("") });
    }
} else {
    while (clones.length > number) {
        $("#" + clones.pop()).remove();
    }
}
ele.data("clones", clones);

}

这是Xhalent改进的不显眼的JS代码，我保存在另一个JS文件（validex.js）中：

(function ($) {
$.validator.unobtrusive.parseDynamicContent = function (selector) {
    //use the normal unobstrusive.parse method
    $jQuery.validator.unobtrusive.parse(selector);
    //get the relevant form
    var form = $(selector).first().closest('form');
    //get the collections of unobstrusive validators, and jquery validators
    //and compare the two
    var unobtrusiveValidation = form.data('unobtrusiveValidation');
    var validator = form.validate();
    $.each(unobtrusiveValidation.options.rules, function (elname, elrules) {
        if (validator.settings.rules[elname] == undefined) {
            var args = {};
            $.extend(args, elrules);
            args.messages = unobtrusiveValidation.options.messages[elname];
            //edit:use quoted strings for the name selector
            $("[name='" + elname + "']").rules("add", args);

        } else {
            $.each(elrules, function (rulename, data) {
                if (validator.settings.rules[elname][rulename] == undefined) {
                    var args = {};
                    args[rulename] = data;
                    args.messages = unobtrusiveValidation.options.messages[elname][rulename];
                    //edit:use quoted strings for the name selector
                    $("[name='" + elname + "']").rules("add", args);
                }
            });
        }
    });
} })($);

我知道这个：

$.validator.unobtrusive.parseDynamicContent('form input:last');

或者某种变体，必须去某个地方，但我不知所措。

问题：如何将Xhalent的精细验证方法整合到我的代码中，复制字段集？

编辑：

以下是页面上引用的脚本（第1.cshtml节）：

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>  
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.js")" type="text/javascript"></script>  
<script src="@Url.Content("~/Scripts/Dupe.js")" type="text/javascript"></script>

以下是要复制的表单：

@using (Html.BeginForm("Section1","P15",FormMethod.Post))
{
@Html.ValidationSummary(true)
<fieldset>
<legend>FILL ME OUT FIRST!</legend>
    <div class="PrimaryOPSelector">
        OP Number (This is your Primary OP, or the OP that you would be changing shifts from):
    </div>
    <div class="editor-field">
        @Html.DropDownListFor(model => model.OP_Number, new SelectList(Model.Ops, "Op_Number", "Op_Number"))
        @Html.ValidationMessageFor(model => model.OP_Number)
    </div>
<p>Please select the number of shifts you would like to have off/change with another staff member: <select id="itemCountSec1" name="itemCountSec1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select></p>
<div class="ReasonForRequest">
        Please Select The Reson For Your Request For Time Off:
    </div>
    <div class="editor-field">
        @Html.DropDownListFor(model => model.Reason_For_Request, new SelectList(Model.ReasonsForRequest, "Reason_ID", "Reason_For_Request1"))
        @Html.ValidationMessageFor(model => model.Reason_For_Request)
    </div>
</fieldset>  
<fieldset id="Section1Fields">

       <p><strong>Shift Start Date: </strong>@Html.DropDownListFor(model => model.Month, new SelectList(Model.Months, "Month_Value", "Month_Name"))
        @Html.DropDownListFor(model => model.Day, new SelectList(Model.Days))
        @Html.DropDownListFor(model => model.Year, new SelectList(Model.Years))</p>

<p><strong>Start Time Of Shift: </strong>
@Html.DropDownListFor(model =>model.Start_Hour, new SelectList(Model.Hours)) :
@Html.DropDownListFor(model => model.Start_Min, new SelectList(Model.Minutes))
@Html.DropDownListFor(model => model.Start_Marker, new SelectList(Model.AMPM))
</p>


<p><strong>End Time Of Shift: </strong>
@Html.DropDownListFor(model => model.End_Hour, new SelectList(Model.Hours)) :  
@Html.DropDownListFor(model => model.End_Min, new SelectList(Model.Minutes))
@Html.DropDownListFor(model => model.End_Marker, new SelectList(Model.AMPM))
</p>


<p><strong>Covering Staff Employee Number: </strong>@Html.EditorFor(model => model.Covering_Staff_Employee_Num)</p>
@Html.ValidationMessageFor(model => model.Covering_Staff_Employee_Num)

<p><strong>Covering Staff Phone Number: </strong>@Html.EditorFor(model => model.Covering_Staff_Phone)</p>
@Html.ValidationMessageFor(model => model.Covering_Staff_Phone)

<p><strong>Type Of Time Off: </strong>@Html.DropDownListFor(model => model.Type_Of_Time_Off, new SelectList(Model.Types, "Type_ID", "Name"))</p>
@Html.ValidationMessageFor(model => model.Type_Of_Time_Off)

<p><strong>Number Of Hours To Be Used: </strong>@Html.EditorFor(model => model.Hrs_Used)</p>
@Html.ValidationMessageFor(model => model.Hrs_Used)
</fieldset>

<p><input type="submit" value="Submit this section" /></p>
}

Answer 1

而不是使用这样一个复杂的方法，而是在加载动态内容后调用的函数中使用以下三行代码：

$("form").removeData("validator");
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");

这将清除页面中之前解析的内容，允许再次解析页面上的所有内容，并将验证应用于所有元素。

使用不显眼的验证验证动态添加的字段集的问题

1 个答案: