유효성 검사 규칙을 MVC3에 동적으로 추가

Question

모두

사용자가 추가 한 동적 양식 입력 텍스트 요소에 유효성 검사 규칙을 추가해야합니다.

난 내가하려고 할 때 올바른 아직 나는 다음과 JS 오류를 얻고있다라고 생각이 구문을 연구, 나는, HTML의 덩어리를 복제 고유 한 ID를 제공하고 DOM

에 추가하여이 달성하고

TypeError: $(...).rules is not a function 

이 의해 발생 : 다음 .rules에게 방법을 액세스 할 수

$("input[type=text].validateRequired").each(function() { 

    $(this).rules("add", { required: true, messages: { required: "Data is missing" } 

    });  
}); 

FireBug에서 $(this)을 검사 할 때 .rules 메소드가 표시되지 않지만 검증 스크립트에 존재하며 모든 문서에서 메소드가 전역 적으로 사용 가능해야 함을 보여줍니다. 범위에서 가져 오는 방법을 모릅니다. 여기

이 문제에 관련된 뷰의 코드 부분이다 :

JS가 포함

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

동적 폼 요소를 생성 JS 방법

<script type="text/javascript"> 
    $(document).ready(function() { 

     var uniqueId = 1; 
     var ctr = 1; 
     $(function() { 
      $('.js-add-cosponsor-hyperlink').click(function() { 

       var copy = $("#cosponsorsTemplate").clone(true).appendTo("#addCosponsorSection").hide().fadeIn('slow'); 
       var cosponsorDivId = 'cosponsors_' + uniqueId; 
       var copyText = copy.html(); 

       copyText = copyText.replace(/Guitar1/g, 'Guitar' + ctr); 
       copyText = copyText.replace('Guitar_1', 'Guitar_' + ctr); 
       copy.html(copyText); 
       $('#cosponsorsTemplate').attr('id', cosponsorDivId); 



       var deleteLink = copy.find("a.icon.delete"); 
       deleteLink.on('click', function() { 
        copy.fadeOut(300, function() { $(this).remove(); }); //fade out the removal 

       }); 


       $.validator.unobtrusive.parse(form); 
       $("input[type=text].validateRequired").each(function() { 

        var t = $(this); 
        $(this).rules("add", { required: true, messages: { required: "Data is missing" } }); 
       }); 

       uniqueId++; 
       ctr++; 
      }); 
     }); 
    }); 

</script> 

* 양식은 * 당신은 HTML의 덩어리를 복제하는

@using (Html.BeginForm()) 
    { 
     [...] 


     <!-- Template used to do the Clone: These need dynamic validation --> 

     <div style="display:none"> 
     <div id="cosponsorsTemplate"> 
       <div class="formColumn1"><label>Guitar</label></div> 
      <div class="formColumn2">@Html.TextBoxFor(model => model.Guitar1.Make, new { Placeholder = "Make", Class = "validateRequired" }) 
       <div class="messageBottom"> 
          @Html.ValidationMessageFor(model => model.Guitar1.Make) 
       </div> 
      </div> 
       <div class="formColumn3">@Html.TextBoxFor(model => model.Guitar1.Model, new { Placeholder = "Model" , Class = "validateRequired"}) 
        <div class="messageBottom"> 
         @Html.ValidationMessageFor(model => model.Guitar1.Model) 
        </div> 
       </div> 
       <div class="formColumn4">@Html.TextBoxFor(model => model.Guitar1.ProductionYear, new { Placeholder = "Production Year", Class = "validateRequired" }) 
          <div class="messageBottom"> 
           @Html.ValidationMessageFor(model => model.Guitar1.ProductionYear) 
          </div><a class="icon delete">Delete</a> 
          </div> 

      </div> 
    </div>  
    <!-- End Add Co-Sponsor Row Template --> 
    } 

Answer 1

그래서 당신은 복제를 할 때마다 당신은 $ .validator.unobtrusive.parse