ASP.NET MVC – 使用jQuery不显眼的验证来阻止提交无效表单

发布时间：2020-12-16 07:06:57 所属栏目：asp.Net 来源：网络整理

导读：我有一个ASP.NET项目,它使用 jQuery.Validate和ASP.NET构建的 unobtrusive wrapper自动连接客户端验证. a)我肯定有合适的库：jquery.js,jquery.validate.js, jquery.validate.unobtrusive.js b)明确打开MVC渲染引擎(web.config的appSettings部分中的ClientVa

我有一个ASP.NET项目,它使用 jQuery.Validate和ASP.NET构建的 unobtrusive wrapper自动连接客户端验证.

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将停止在其轨道中,并且永远不会到达原始方法中的最后一行代码(返回false),这会阻止表单提交.

解决方案

升级jQuery Validate Unobtrusive

Newer versions of 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;

添加ValidationMessageFor

要解决核心问题,对于表单上的每个输入,请确保包括：

@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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!