MVC4：jQuery验证不显眼的原生工作不正确 [英] MVC4: jQuery Validation Unobtrusive Native working incorrectly
问题描述
我MVC4 Web应用程序是建立在一把umbraco 7.我已经安装了以下的NuGet包：
My MVC4 web app is built on Umbraco 7. I have installed the following nuget packages:
jQuery 1.10.2
jQuery.Validation 1.11.1
jQuery.Validation.Unobtrusive.Native.MVC4 1.1.0.0
不显眼的验证是从本网站：的http://jqueryvalidationunobtrusivenative.azurewebsites.net/Home/GettingStarted
我的看法是这样的：
<form id="frmContact" method="post" action="@Url.Action("ContactForm", "ContactFormSurface")">
<div>
<label>Full Name</label>
@Html.TextBoxFor(m => m.FullName, true)
@Html.ValidationMessageFor(m => m.FullName, "*")
</div>
<div>
<label>Company</label>
@Html.TextBoxFor(m => m.Company, true)
@Html.ValidationMessageFor(m => m.Company, "*")
</div>
<div>
<label>Email Address</label>
@Html.TextBoxFor(m => m.EmailAddress, true)
@Html.ValidationMessageFor(m => m.EmailAddress, "*")
</div>
<div>
<label>Message @Html.ValidationMessageFor(m => m.Message, "*")</label>
@Html.TextAreaFor(m => m.Message, true, 10, 30, new { @class = "input-xl" })
</div>
@Html.ValidationSummary(false, "Please correct the following errors before submitting the message")
<div>
<button type="submit">Send</button>
</div>
</form>
在web.config中：
In the web.config:
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
我的模型：
public class ContactFormViewModel
{
[Required, Display(Name = "Full Name")]
public string FullName { get; set; }
public string Company { get; set; }
[Required, Display(Name = "Email Address")]
[RegularExpression(@"^(?!\.)(""([^""\r\\]|\\[""\r\\])*""|([-a-z0-9!#$%&'*+/=?^_`{|}~]|(?<!\.)\.)*)(?<!\.)@[a-z0-9][\w\.-]*[a-z0-9]\.[a-z][a-z\.]*[a-z]$", ErrorMessage="Not a valid email address")]
public string EmailAddress { get; set; }
[Required]
[DataType(DataType.MultilineText)]
public string Message { get; set; }
}
下面的脚本（这我已经在浏览器中正确证实负载）
Here's the scripts (which I have confirmed loads correctly in the browser)
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
渲染HTML看起来像这样（在初始页面加载）：
The rendered HTML looks like this (at initial page load):
<form action="/umbraco/Surface/ContactFormSurface/ContactForm" method="post" id="frmContact">
<div>
<label>Full Name</label>
<input type="text" value="" name="FullName" id="FullName" data-rule-required="true" data-msg-required="The Full Name field is required." class="input-validation-error">
<span data-valmsg-replace="false" data-valmsg-for="FullName" class="field-validation-error">*</span>
</div>
<div>
<label>Company</label>
<input type="text" value="" name="Company" id="Company">
<span data-valmsg-replace="false" data-valmsg-for="Company" class="field-validation-valid">*</span>
</div>
<div>
<label>Email Address</label>
<input type="text" value="" name="EmailAddress" id="EmailAddress" data-rule-required="true" data-rule-regex="{"pattern":"^(?!\\.)(\"([^\"\\r\\\\]|\\\\[\"\\r\\\\])*\"|([-a-z0-9!#$%&'*+/=?^_`{|}~]|(?<!\\.)\\.)*)(?<!\\.)@[a-z0-9][\\w\\.-]*[a-z0-9]\\.[a-z][a-z\\.]*[a-z]$"}" data-msg-required="The Email Address field is required." data-msg-regex="Not a valid email address" class="input-validation-error">
<span data-valmsg-replace="false" data-valmsg-for="EmailAddress" class="field-validation-error">*</span>
</div>
<div>
<label>Message <span data-valmsg-replace="false" data-valmsg-for="Message" class="field-validation-error">*</span></label>
<textarea rows="10" name="Message" id="Message" data-rule-required="true" data-msg-required="The Message field is required." cols="30" class="input-validation-error input-xl"></textarea>
</div>
<div data-valmsg-summary="true" class="validation-summary-errors"><span>Please correct the following errors before submitting the message</span>
<ul>
<li>The Full Name field is required.</li>
<li>The Email Address field is required.</li>
<li>The Message field is required.</li>
</ul>
</div>
<div>
<button type="submit">Send</button>
</div>
</form>
正如你可能会看到，验证文本已经是在加载时间无效状态（前任意键presses或表单提交）。此外，当我提交了空表单将其提交到服务器，这样客户端验证并没有真正发生。 jQuery的验证脚本运行，因为不需要公司现场和验证消息的类属性反映如此（现场验证，有效的）
修改：
控制器code的要求：
EDIT: Controller code as requested:
public class ContactFormSurfaceController: Umbraco.Web.Mvc.SurfaceController
{
[HttpGet]
public ActionResult ContactForm(ContactFormViewModel model)
{
return PartialView("ContactForm", new ContactFormViewModel());
}
}
任何人可以帮助我在这里？先谢谢了。
Can anybody help me out here? Thanks in advance.
推荐答案
有了这个新的原生不显眼的验证，你似乎有叫 .validate（）的形式手动。
With this new Native Unobtrusive validation, you seem to have to call .validate() on the form manually.
从日期演示示例的：
$("form").validate({
submitHandler: function (form) {
alert("This is a valid form!")
}
});
或者更简单地例子：
Or in simpler examples:
$("form").validate();
我有这样的经验，但由于这只是使用jQuery的验证插件，则文档可能值得一读。
本工作原理与你生成的HTML：
This WORKS with your generated HTML:
请参阅这些小提琴，以供参考：
See these fiddles for reference:
这篇关于MVC4：jQuery验证不显眼的原生工作不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
