[英]unobtrusive javascript validation not submitting form in asp.net mvc 3
[英]ASP.NET MVC - prevent submit of invalid form using jQuery unobtrusive validation
我有一个ASP.NET项目,它使用jQuery.Validate和ASP.NET构建的不显眼的包装器自动连接客户端验证。
a)我肯定有相应的库: jquery.js , jquery.validate.js和jquery.validate.unobtrusive.js
b)明确打开MVC渲染引擎(web.config的appSettings
部分中的ClientValidationEnabled
和UnobtrusiveJavaScriptEnabled
)
这是一个简单的例子,其中的事情被打破:
型号 :
public class Person
{
[Required]
public string Name { get; set; }
}
控制器 :
public ActionResult Edit()
{
Person p = new Person();
return View(p);
}
查看 :
@model validation.Models.Person
@using (Html.BeginForm()) {
@Html.ValidationSummary(false)
@Html.LabelFor(model => model.Name)
@Html.EditorFor(model => model.Name)
}
这会生成以下客户端标记:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.js"></script> <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js"></script> <form action="/Person" method="post"> <div class="validation-summary-valid" data-valmsg-summary="true"> <ul><li style="display:none"></li></ul> </div> <label for="Name">Name</label> <input data-val="true" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="" /> <input type="submit" value="Save" /> </form>
运行时,它将执行客户端验证,注意某些表单元素无效,但随后也会回发到服务器。
为什么不阻止状态无效的表单上的回发?
事实证明,当您没有为给定表单元素包含@Html.ValidationMessageFor
占位符时会发生这种情况。
以下是对问题发生位置的深入探讨:
表单提交时, jquery.validate.js
将调用以下方法:
validate: function( options ) {
form: function() {
showErrors: function(errors) {
defaultShowErrors: function() {
showLabel: function(element, message) {
this.settings.errorPlacement(label, $(element) )
其中errorPlacement
将在jquery.validate.unobtrusive.js
调用此方法:
function onError(error, inputElement) {
var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
replace = $.parseJSON(container.attr("data-valmsg-replace")) !== false;
当我们不为验证消息添加占位符时, $(this).find(...)
将找不到任何内容。
含义container.attr("data-valmsg-replace")
将返回undefined
当我们尝试在未定义的值上调用$.parseJSON
时,这就产生了一个问题。 如果抛出错误(并且没有被捕获),JavaScript将停止在其轨道中,并且永远不会到达原始方法中的最后一行代码( return false
),这会阻止表单提交。
较新版本的jQuery Validate可以更好地处理这个问题,并在将它们传递给$.parseJSON
之前检查空值
function onError(error, inputElement) { // 'this' is the form element
var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
replaceAttrValue = container.attr("data-valmsg-replace"),
replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) !== false : null;
要解决核心问题,对于表单上的每个输入,请确保包括:
@Html.ValidationMessageFor(model => model.Name)
这将呈现以下客户端标记
<span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.js"></script> <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js"></script> <form action="/Person" method="post"> <div class="validation-summary-valid" data-valmsg-summary="true"> <ul><li style="display:none"></li></ul> </div> <label for="Name">Name</label> <input data-val="true" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span> <input type="submit" value="Save" /> </form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.