눈에 거슬리지 않는 유효성 검사를 사용하여 동적으로 추가 된 필드 세트 유효성 검사 문제가 있습니다

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

또는 약간의 변형 이것의, 어딘가에 가야한다, 그러나 나는 손실에이다.

질문 : 어떻게 필드 집합을 복제하는 코드에 XHERENT의 정밀한 검증 방법을 통합 할 수 있습니까?

편집 :

다음

<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

오히려 여기

페이지 (섹션 1.cshtml)에 참조하는 스크립트입니다 이러한 복잡한 메서드를 사용하는 대신 동적 콘텐츠 뒤에 호출 된 함수에서 다음 세 줄의 코드를 사용할 수 있습니다. 로드 S :

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

이 페이지의 모든 내용이 다시 구문 분석하고, 검증은 모든 요소에 적용 할 수 있도록하는 페이지에서 이전 구문 분석 된 내용을 삭제합니다.