Question

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

e.g。

<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>

等等。

我有一个下拉列表，用户可以选择是个人还是公司。如果选择了人，页面会加载人的属性，例如birthdate，但如果他/她选择了“company”选项，我会将表单的一部分（使用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动态加载内容。我能够通过两个步骤来完成代码。

当内容加载到DOM时，我执行了以下操作：

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

提交表单时，我执行了以下操作：

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

这似乎触发了不引人注目的验证。希望有人从中得到一些东西。

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

2 个答案: