对 javascript MVC3 创建的元素进行不显眼的 jQuery 验证

Question

我有一个由 mvc3 脚手架创建的注册表单。

例如

<div class="editor-label">
    @Html.LabelFor(model => model.Email)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Email)
    @Html.ValidationMessageFor(model => model.Email)
</div>

等等。

我有一个下拉列表，用户可以在其中选择是个人还是公司。 如果选择了人，则页面会加载该人的属性，例如生日，但如果他/她选择“公司”选项，我会将表单的一部分（使用 jquery .detach() .attach()）切换到隐藏表单外的 div（因此值不会在提交时发布）

这适用于我的自定义验证和视图模型，唯一的问题是没有对新切换的元素进行 jquery 验证。

我想使用不显眼的 jquery 验证，但是如何手动将处理程序附加到新的表单元素（或重新解析整个 dom 以进行验证）？

编辑：查看此博文后：http://xhalent.wordpress.com/2011/01/24/applying-unobtrusive-validation-to-dynamic-content/

我已尝试更新我的代码。我已经包含了那里描述的javascript，并尝试重新解析表单的新插入部分。 当它没有任何区别时，我切换到 .remove() 和 .html() 我的代码并插入裸 html，但它没有任何帮助。 这是我的脚本：

    <script>
        $(document).ready(function () {
            var secretholder = $('#secret_from_holder');
            var visibleholder = $('#type_data_holder');
            var select = $('select#TypeValueID');
            select.change(function () {
                var value = $('select#TypeValueID option:selected').val();
                switch (value) {
                    case '1':
                        var tohide = visibleholder.html();
                        visibleholder.children().remove();
                        var toshow = secretholder.html();
                        secretholder.children().remove();

                        secretholder.append(tohide);
                        visibleholder.append(toshow);

                        $.validator.unobtrusive.parseDynamicContent('div.firm');
                        break;
                    case '2':
                        var tohide = visibleholder.html();
                        visibleholder.children().remove();
                        var toshow = secretholder.html();
                        secretholder.children().remove();

                        secretholder.append(tohide);
                        visibleholder.append(toshow);

                        $.validator.unobtrusive.parseDynamicContent('div.person');
                        break;
                }
            });
        });
    </script>

这是我在我切换的表单之外隐藏的部分：

    <div id="secret_from_holder" style="display: none">
    @if (Model.TypeValueID == Constants.Crm.Customer.Types.FIRM_VALUE_ID)
    {
        <div class="person">
            <div class="editor-label">
                @Html.LabelFor(model => model.Person.Name)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Person.Name)
                @Html.ValidationMessageFor(model => model.Person.Name)
            </div>
            <div class="clear"></div>
            <div class="editor-label">
                @Html.LabelFor(model => model.Person.BirthDate)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Person.BirthDate)
                @Html.ValidationMessageFor(model => model.Person.BirthDate)
            </div>
            <div class="clear"></div>
        </div>
    }
    else
    { 
        <div class="firm">
            <div class="editor-label">
                @Html.LabelFor(model => model.Firm.Name)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Firm.Name)
                @Html.ValidationMessageFor(model => model.Firm.Name)
            </div>
            <div class="clear"></div>
            <div class="editor-label">
                @Html.LabelFor(model => model.Firm.BankAccountNumber)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Firm.BankAccountNumber)
                @Html.ValidationMessageFor(model => model.Firm.BankAccountNumber)
            </div>
            <div class="clear"></div>
            <div class="editor-label">
                @Html.LabelFor(model => model.Firm.Tax)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Firm.Tax)
                @Html.ValidationMessageFor(model => model.Firm.Tax)
            </div>
            <div class="clear"></div>
            <div class="editor-label">
                @Html.LabelFor(model => model.Firm.EuTax)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Firm.EuTax)
                @Html.ValidationMessageFor(model => model.Firm.EuTax)
            </div>
            <div class="clear"></div>
            <div class="editor-label">
                @Html.LabelFor(model => model.Firm.TradeNumber)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Firm.TradeNumber)
                @Html.ValidationMessageFor(model => model.Firm.TradeNumber)
            </div>
            <div class="clear"></div>
        </div>                   
    }
    </div>

我真的卡在这里了，请帮忙。

自动解析的部分（在页面加载时）总是验证（即使切换出来并再次返回），但我尝试手动解析的部分从不验证

Answer 1

您需要parse the newly added contents 才能通过客户端验证注册它。这里是another blog post，它讨论了这些问题。然而another one。

Answer 2

我也有类似的场景，我使用 Ajax 使用 Partial View 动态加载内容。我能够通过两步流程让我的代码正常工作。

1. 当内容加载到 DOM 时，我做了以下操作：

   $.ajax({
      type: "Get",
      url: SomeURL,
      data: { TransactionId: recordId },
      success: function (data) {
         $('#SomeDiv').html(data);
         $.validator.unobtrusive.parse('#SomeDiv');              
         ShowModal();
      }
   });
   

2. 提交表单时，我做了以下操作：

   var form = $('#SomeDiv').find('form');
   if ($(form).valid()) {
      // call ajax post
   }
   

这似乎触发了不显眼的验证。希望有人能从中有所收获。