使用不顯眼驗證驗證動態添加字段集的問題

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

這將清除出從頁面前面分析的內容，允許網頁上的所有內容進行重新分析和驗證被應用到所有元素。