3

我有一个由 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>

我真的被困在这里，请帮助。

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

4

2 回答 2

3

您需要解析新添加的内容才能将其注册到客户端验证中。这是另一篇讨论这些问题的博客文章。还有一个。

于 2011-07-14T10:46:36.633 回答
1

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

  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
}

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

于 2014-07-02T04:31:57.927 回答