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