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

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

相反比使用这种复杂的方法，您可以在动态内容i后调用的函数中使用以下三行代码Š载：

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

这将清除出从页面前面分析的内容，允许网页上的所有内容进行重新分析和验证被应用到所有元素。