ASP.NET MVC5：填写表单字段期间的不显眼验证答案

【问题标题】：ASP.NET MVC5: Unobtrusive validation during the filling out of the form fieldASP.NET MVC5：填写表单字段期间的不显眼验证
【发布时间】：2015-04-22 06:50:05
【问题描述】：

我想在填写表单字段时启动验证元素。
如果我创建一个包含简单模型的简单 MVC 应用程序：

public class SimpleModel
  {
    [RegularExpression("[A-Z][a-z]+")]
    [Required]
    public string FirstName { get; set; }

    [RegularExpression("[A-Z][a-z]+")]
    [Required]
    public string LastName { get; set; }
  }

对于这个模型，我为此模型创建了相应的控制器和视图（使用模板编辑的剃刀）。
此时，一切都按原样进行。但仅在单击“保存”按钮（提交表单）时，而不是在填写字段期间。这就是为什么我想在脚本部分实现验证器的 onkeyup 操作：

@section Scripts
{
  @Scripts.Render("~/bundles/jqueryval")

  <script type="text/javascript">

    $('form').validate(
      {
        onkeyup: function (element)
        {
          $.validator.unobtrusive.parseElement(element, true);
        }
      });

  </script>
}

但它不起作用，原始验证也不起作用（现在如果我点击保存，表单将提交为有效的 altrough 字段未填写或填写不正确）。
如果我只使用原始验证将不起作用 $('form').validate(); 要么 $('form').valid(); 命令。也许有趣的是 $('form').valid(); 尽管表单未填写因此无效，但返回 true。

【问题讨论】：

可能完全不相关，但“脚本包含”的顺序很重要。一旦我在 jquery.1.0.js 文件之前包含了 jquery.unobtrusive，验证就无法正常工作。
首先包含 jquery，然后是 jquery.validation，然后是 _Layout 和 BundleConfig 中声明的 jquery.validation.unobtrusive。没有使用 jquery.ui。
浏览器控制台有错误吗？在浏览器中按 F12 并查看是否有任何异常被抛出。此外，请确保您没有禁用不显眼的默认行为。 bartwullems.blogspot.co.uk/2012/03/…
当我想尝试调试器时，IE 提示“脚本调试器无法连接到目标进程。已附加调试器。”所以我把 onkeyup 改成： onkeyup: function (element) { console.log("onkeyup", element); //$.validator.unobtrusive.parseElement(element, false); }，并且在控制台中我收到了预期的结果（文本“onkeyup”后跟输入元素标签 FirstName 或 LastName），没有任何错误。
现在我在浏览器的新实例中打开页面，我可以在没有上述消息的情况下调试代码。我浏览了这两个字段的正常代码。第一个然后第二个。调试器，但这似乎是个好主意...

标签： asp.net asp.net-mvc validation razor unobtrusive-validation

【解决方案1】：

解决方法很简单。只需意识到，在不显眼的初始化之后使用脚本进行验证是可能的。此初始化是通过注册新的 jquery 就绪函数来执行的 - 在底部的 jquery.validate.unobtrusive.js 中，您可以找到以下代码：

$(function () {
  $jQval.unobtrusive.parse(document);
});

因此，如果要进行额外的初始化，就必须创建自己的就绪函数并插入必要的代码。

出于上述问题中提到的目的，您可以使用以下代码：

@section Scripts 
{
  @Scripts.Render("~/bundles/jqueryval")

  <script type="text/javascript">

    $(function ()
    {
      var validator = $('form').validate();
      validator.form();
    });

  </script>
}

【讨论】：