由JavaScript MVC3创建上的元素不显眼的jQuery验证 [英] unobtrusive jQuery validation on elements created by javascript MVC3
问题描述
我有MVC3脚手架创建一个登记表。
I have a register form created by mvc3 scaffolding.
例如
<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>
等。
我有一个DropDownList，用户可以选择是否HES一个人或一家公司。
如果人选择了页面加载与人的特性，如出生日期，但如果他/她选择的选项'公司'，我切换出表格的一部分（使用jQuery .detach（）.attach（））来隐藏形式（所以值不张贴在提交）
I have a dropdownlist where the user can select if hes a person or a company. If person is selected the page loads with the person's properties, like birthdate, but if he/she selects the option 'company', I switch out a part of the form (with jquery .detach() .attach()) to a hidden div outside the form (so the values aren't posted on submit)
这正常工作与我自定义的验证和的ViewModels，唯一的问题是，有在刚接通的元素没有jQuery验证。
This works fine with my custom validation and viewmodels, the only problem is that there is no jquery validation for the elements freshly switched in.
我想用不显眼的jQuery验证，但我怎么手动附加处理新的表单元素（或重新分析进行验证整个DOM）？
I would like to use unobtrusive jquery validation, but how do I attach the handlers manually to the new form elements (or reparse the whole dom for validation)?
编辑：后检查该博文：http://xhalent.word$p$pss.com/2011/01/24/applying-unobtrusive-validation-to-dynamic-content/
我试图更新我的code。我已经包括有描述的JavaScript，并试图重新分析形式的新插入的一部分。
当它没有任何区别，我切换到一个.remove（）和.html（）我的code和插入HTML裸露，但它并没有以任何方式帮助。
继承人我的脚本：
i have tried to update my code. i have included the javascript described there, and tried to reparse the newly inserted part of the form. when it did not make any difference I switched to .remove() and .html() my code and insert the bare html, but it did not help in any way. heres my script:
<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>
我的继承人，我在切换形式外隐藏的部分：
heres my hidden part outside the form which i switch in:
<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>
我真的坚持在这里，请大家帮忙。
I'm really stuck here, please help.
部分自动解析（上页面加载）始终验证（即使转出，然后再返回），但一部分，我尝试解析手动从来没有验证
the part automatically parsed (on pageload) always validates (even if switched out and back again), but the part I try to parse manually never validates
推荐答案
您需要的解析新添加的内容的，以便与客户端验证注册。这里的<一个href=\"http://itmeze.com/2010/10/08/client-side-validation-after-ajax-partial-view-result-in-asp-net-mvc-3/\"相对=nofollow>另一篇博客中，其中讨论了这些问题。然而另一个。
You need to parse the newly added contents in order to register it with client validation. And here's another blog post which discusses those issues. And yet another one.
这篇关于由JavaScript MVC3创建上的元素不显眼的jQuery验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
