- 首页
- 其他开发
- 从 AJAX 调用附加表单时，如何正确设置 MVC 5 不显眼的验证?
从 AJAX 调用附加表单时，如何正确设置 MVC 5 不显眼的验证?
[英] How to setup MVC 5 unobtrusive validation correctly when appending the form from an AJAX call?
本文介绍了从 AJAX 调用附加表单时，如何正确设置 MVC 5 不显眼的验证?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经对这个问题进行了搜索，并检查了我的 web.config、bundleconfig 和我的布局，它们如下所示:web.config:
到目前为止，一切都已包括在内，应该可以顺利运行.
我的模型:
[DisplayName("Förnamn")][必需(ErrorMessage = "Vänligen ange ett förnamn")][字符串长度(100)]公共字符串名字{获取；放;}[DisplayName("Efternamn")][必需(ErrorMessage = "Vänligen ange ett efternamn")][字符串长度(100)]公共字符串姓氏 { 获取；放;}[DisplayName("E-post")][必需(ErrorMessage = "Vänligen ange epost")][字符串长度(100)][EmailAddress(ErrorMessage = "Ange en korrekt e-postaddress")]公共字符串电子邮件{获取；放;}[显示名称(美孚")][数据类型(数据类型.电话号码)]公共字符串 PhoenNumber { 获取；放;}[数据类型(数据类型.密码)][DisplayName("Lösenord")]公共字符串密码 { 获取；放;}
我的观点:
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "credentialsForm" })){@Html.AntiForgeryToken()<div class="form-horizontal">@Html.ValidationSummary(true, "", new { @class = "text-danger" })<div class="form-group createCustomerFormGroup">@Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-3" })<div class="col-md-9">@Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control", @name = "FirstName" } })@Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
<div class="form-group createCustomerFormGroup">@Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-3" })<div class="col-md-9">@Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })@Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
<div class="form-group createCustomerFormGroup">@Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-3" })<div class="col-md-9">@Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })@Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
<div class="form-group createCustomerFormGroup">@Html.LabelFor(model => model.PassWord, htmlAttributes: new { @class = "control-label col-md-3" })<div class="col-md-9">@Html.EditorFor(model => model.PassWord, new { htmlAttributes = new { @class = "form-control" } })@Html.ValidationMessageFor(model => model.PassWord, "", new { @class = "text-danger" })
<div class="form-group createCustomerFormGroup">@Html.LabelFor(model => model.PhoenNumber, htmlAttributes: new { @class = "control-label col-md-3" })<div class="col-md-9">@Html.EditorFor(model => model.PhoenNumber, new { htmlAttributes = new { @class = "form-control" } })@Html.ValidationMessageFor(model => model.PhoenNumber, "", new { @class = "text-danger" })
}
通过萤火虫表单中的一个字段:
我在 firebug 中运行这个脚本，即使应该有错误，我也没有得到任何错误，因为某些字段是必需的，但它们没有值:
$("#credentialsForm").validate().numberOfInvalids()//返回 0$("#credentialsForm").validate().valid()//返回真
我已经做了几个小时了，现在我快疯了，我错过了什么?
将问题从如何正确设置 MVC 5 非侵入式验证"更改为当前标题，因为它比之前的标题更能描述我正在寻找的内容.
解决方案
一段时间后我想通了.
我是从返回局部视图的 AJAX 调用中附加此表单的.
我找到了答案这里
显然，在添加这样的动态数据时，您首先必须去除validator"和unobtrusiveValidation"的形式，然后在表单上调用 $.validator.unobtrusive.parse 函数，如下所示:
var form = $("#main_div").closest("form");form.removeData('验证器');form.removeData('unobtrusiveValidation');$.validator.unobtrusive.parse(form);
可以在这里找到更详细的解释
I have googeld about this issue and I have checked my web.config, bundleconfig and my layout which look like this:
web.config:
<appSettings>
<add key="webpages:Version" value="3.0.0.0" />
<add key="webpages:Enabled" value="false" />
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
In my App_Start folder under "BundleConfig.cs":
var jqueryBundle = new ScriptBundle("~/bundles/jquery");
jqueryBundle.Include("~/Scripts/jquery-{version}.js");
jqueryBundle.Include("~/Scripts/moment.min.js");
jqueryBundle.Include("~/Scripts/loadingoverlay.js");
jqueryBundle.Include("~/Scripts/fullcalendar.js");
jqueryBundle.Include("~/Scripts/lang-all.js");
jqueryBundle.Transforms.Add(jsTransformer);
jqueryBundle.Orderer = nullOrderer;
bundles.Add(jqueryBundle);
var jqueryvalBundle = new ScriptBundle("~/bundles/jqueryval");
jqueryvalBundle.Include("~/Scripts/jquery.validate*");
jqueryvalBundle.Include("~/Scripts/jquery.validate.js");
jqueryvalBundle.Include("~/Scripts/jquery.validate.unobtrusive.js");
jqueryvalBundle.Transforms.Add(jsTransformer);
jqueryvalBundle.Orderer = nullOrderer;
bundles.Add(jqueryvalBundle);
in my layout page:
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/bootstrap")
Firebug shows:
Thus far everything is included and shouold be running smoothly.
My model:
[DisplayName("Förnamn")]
[Required(ErrorMessage = "Vänligen ange ett förnamn")]
[StringLength(100)]
public string FirstName { get; set; }
[DisplayName("Efternamn")]
[Required(ErrorMessage = "Vänligen ange ett efternamn")]
[StringLength(100)]
public string LastName { get; set; }
[DisplayName("E-post")]
[Required(ErrorMessage = "Vänligen ange epost")]
[StringLength(100)]
[EmailAddress(ErrorMessage = "Ange en korrekt e-postaddress")]
public string Email { get; set; }
[DisplayName("Mobil")]
[DataType(DataType.PhoneNumber)]
public string PhoenNumber { get; set; }
[DataType(DataType.Password)]
[DisplayName("Lösenord")]
public string PassWord { get; set; }
My view:
<div class="col-md-4 col-xs-12">
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "credentialsForm" }))
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group createCustomerFormGroup">
@Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-9">
@Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control", @name = "FirstName" } })
@Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group createCustomerFormGroup">
@Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-9">
@Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group createCustomerFormGroup">
@Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-9">
@Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group createCustomerFormGroup">
@Html.LabelFor(model => model.PassWord, htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-9">
@Html.EditorFor(model => model.PassWord, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.PassWord, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group createCustomerFormGroup">
@Html.LabelFor(model => model.PhoenNumber, htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-9">
@Html.EditorFor(model => model.PhoenNumber, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.PhoenNumber, "", new { @class = "text-danger" })
</div>
</div>
</div>
}
</div>
a field in the form via firebug:
I run this script in firebug and I get no errors even though there should be errors since some of the fields are requiered but they do not have a value:
$("#credentialsForm").validate().numberOfInvalids()
// retunrs 0
$("#credentialsForm").validate().valid()
// returns true
Ive been at this for hours and im going nuts right now, what am I missing?
EDIT: changed the question from "How to setup MVC 5 unobtrusive validation correctly" to it's current title since it described what I was looking for better than the previous title.
解决方案
After some time I figured this out.
I was appending this form from an AJAX call which returned a partial view.
I found the answer
here
apperently when adding dynamic data like this you first have to strip the form of 'validator' and 'unobtrusiveValidation'and then call the $.validator.unobtrusive.parse function on the form, like so:
var form = $("#main_div").closest("form");
form.removeData('validator');
form.removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse(form);
A more detailed explenation can be found here
这篇关于从 AJAX 调用附加表单时，如何正确设置 MVC 5 不显眼的验证?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
