Проблема проверки динамически добавленного набора полей с использованием ненавязчивой проверки

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

}

Вот модифицированный ненавязчивый код JS Xhalent, который я сохранил в другом файле 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");

Это удалит предыдущий проанализированный контент со страницы, позволит снова проанализировать весь контент на странице и применить проверку ко всем элементам.