javascript - 使用 html.validationmessagefor 作为客户端错误消息

Question

我有一些文本字段的服务器端验证消息。字段“title”是必填字段服务器端，在类中具有“[Required]”数据属性，但这似乎只在回发或表单提交时进行检查。我将“标题”文本字段保存在 jquery .change 事件中，下面是 sudo 代码。但我想使用我的验证消息来显示来自客户端检查的错误消息。不确定该怎么做？

html.

@Html.ValidationMessageFor(model => model.Overview.Title, "", new { @class = "text-danger" })

呈现为

<span class="field-validation-valid text-danger" data-valmsg-for="Overview.Title" data-valmsg-replace="true"></span>

如果我想在 javascript 中进行一些客户端检查，然后使用此元素显示客户端错误消息，我可以这样做吗？我只是想避免使用另一个隐藏元素。我知道我必须使用

data-valmsg-for="Overview.Title"

因为所有其他文本字段的其他数据属性都相同。

如果我想检查以确保“标题”的长度大于 1，那么在此处显示客户端错误消息的最佳方法是什么？

也许是这样的——

$('#Overview_Title').change(function() {
    var title = $(this).val();
    if (title.length == 0) {
      // show error message "title has to be a value to save"
      }
    else {
      // do other work like save to db
      }
  });

Answer 1

你有几种方法可以做到这一点，但我认为这是最简单的方法:

MVC 默认会捆绑 jquery.validate javascript 库到您的页面。由于您已经用 [Required] 标记了该字段属性，Html.EditorFor将为您将正确的属性绑定(bind)到您的 HTML 中，以便在必要时进行验证。

为了使您当前的逻辑能够进行最小的更改，您可以添加 <form>标记您的输入字段。我想你需要这个用于 validate开箱即用的方法。然后你的 javascript 会变成这样:

$('#Overview_Title').change(function() {
if ($(this).valid()) {
  // do your stuff
  }
else {
  // error message displayed automatically. don't need to do anything here unless you want to
  }
});

这将允许您使用 Required属性来设置您的错误消息文本和您的 ValidationMessageFor应该显示错误消息，而无需您付出任何额外的努力。

查看此 plunkr 作为概念证明:http://plnkr.co/edit/ip04s3dOPqI9YNKRCRDZ?p=preview

编辑

我不确定我是否理解您的后续问题。但是如果你想动态地向字段添加规则，你可以按照这些行做一些事情:

$( "#someinput" ).rules( "add", {
 required: true,
 messages: {
 required: "a value is required to save changes"
 }
});

您可以通过执行类似的操作来添加未反射(reflect)在服务器端的规则。然后您可以以相同的方式验证该输入。