動態地將驗證規則添加到MVC3

Question

所有，

我需要向用戶添加的動態表單輸入文本元素添加驗證規則。

我通過克隆大量HTML，提供唯一的ID並將其添加到DOM中來完成此任務

我研究了此語法，我認為這是正確的，但是在嘗試訪問.rules方法時出現以下JS錯誤：

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

造成此：

$("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>

* 表格 *

    @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

您正在克隆HTML塊，因此每次進行克隆時，都需要使用$ .validator.unobtrusive.parse來解析整個表單。