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

Question

我有一些文本字段的服务器端验证消息。字段 'title' 是必填字段服务器端，在 class 中具有“[Required]”数据属性，但这似乎只在回发或表单提交时进行检查。我将 'title' 文本字段保存在 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"

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

如果我想检查以确保 "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 将为您将正确的属性绑定到您的 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"
 }
});

您可以通过执行类似的操作来添加未反映在服务器端的规则。然后你可以用同样的方式验证输入。

Answer 2

如果你想使用 jquery 进行 100% 的客户端验证，你可以使用这样的东西：

$('#Overview_ISBN').on('input', function() {
    var input=$('#Overview_Title');
    var is_name=input.val();
    if(is_name){input.removeClass("invalid").addClass("valid");}
    else{input.removeClass("valid").addClass("invalid");}
});

这是JSFiddle link

的代码

在我发布的示例中，如果您开始输入 ISBN 而标题为空，您将收到错误消息。

在你的问题中不确定你想如何触发错误，所以我假设它是不同输入中的一个条目

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

Using a html.validationmessagefor for a client side error message

html

javascript

asp.net-mvc

jquery

client-side-validation