仅显示第一条错误消息

Question

我将 ASP.NET MVC3 用于具有服务器和客户端验证的表单。我将错误消息显示为输入上方的气球。由于错误的显示，我一次只需要显示一个错误，否则气球往往会掩盖其他可能也有错误的字段。

如何自定义验证行为以仅呈现第一条错误消息？

编辑：请注意表单同时具有服务器和客户端验证，并且我只想显示整个表单（而不是每个字段）的第一条错误消息。

Answer 1

如果有人需要，我想出的解决方案是在页面底部添加以下脚本。这与现有的 javascript 验证挂钩，以动态隐藏表单中除第一个错误之外的所有错误。

<script>
    $(function() {
        var form = $('form')[0];
        var settings = $.data(form, 'validator').settings;
        var errorPlacementFunction = settings.errorPlacement;
        var successFunction = settings.success;

        settings.errorPlacement = function(error, inputElement) {
            errorPlacementFunction(error, inputElement);
            showOneError();
        }
        settings.success = function (error) {
            successFunction(error);
            showOneError();
        }
        function showOneError() {
            var $errors = $(form).find(".field-validation-error");
            $errors.slice(1).hide();
            $errors.filter(":first:not(:visible)").show();
        }
    });
</script>

Answer 2

可以试一试您的控制器操作

var goodErrors = ModelState.GroupBy(MS => MS.Key).Select(ms => ms.First()).ToDictionary(ms => ms.Key, ms => ms.Value);
ModelState.Clear();

foreach (var item in goodErrors)
{
    ModelState.Add(item.Key, item.Value);
}

我只是选择每个属性错误中的一个，清除所有错误，然后将单个错误添加回来。

这完全未经测试，但应该可以工作。

Answer 3

您可以创建一个仅显示第一个错误的自定义验证摘要。这可以通过为 HtmlHelper 类创建扩展或编写您自己的 HtmlHelper 来完成。前者更直接。

public static class HtmlHelperExtensions
{
    static string SingleMessageValidationSummary(this HtmlHelper helper, string validationMessage="") 
    {
        string retVal = "";
        if (helper.ViewData.ModelState.IsValid)
            return "";
        retVal += @"<div class=""notification-warnings""><span>";
        if (!String.IsNullOrEmpty(validationMessage))
            retVal += validationMessage;
        retVal += "</span>";
        retVal += @"<div class=""text"">";
        foreach (var key in helper.ViewData.ModelState.Keys) 
        {
            foreach(var err in helper.ViewData.ModelState[key].Errors)
            retVal += "<p>" + err.ErrorMessage + "</p>";
            break;
        }
        retVal += "</div></div>";
        return retVal.ToString();
    }
}

这是用于 ValidationSummary，但同样可以用于 ValidationMessageFor。

见：Custom ValidationSummary template Asp.net MVC 3

编辑：客户端...

更新 jquery.validate.unobtrusive.js。特别是 onError 函数，它说 error.removeClass("input-validation-error").appendTo(container);

未经测试，但将该行更改为：error.removeClass("input-validation-error").eq(0).appendTo(container);

Answer 4

创建一个只呈现一条消息的html helper extension。

public static MvcHtmlString ValidationError(this HtmlHelper helper)
{
  var result = new StringBuilder();
  var tag = new TagBuilder("div");
  tag.AddCssClass("validation-summary-errors");

  var firstError = helper.ViewData.ModelState.SelectMany(k => k.Value.Errors).FirstOrDefault();

  if (firstError != null)
  {
    tag.InnerHtml = firstError.ErrorMessage;
  }

  result.Append(tag.ToString());
  return MvcHtmlString.Create(result.ToString());
}

更新jquery.validate.unobtrusive.jsOnErrors函数如下，

function onErrors(form, validator) {  // 'this' is the form element
   // newly added condition 
   if ($(form.currentTarget).hasClass("one-error")) {
      var container = $(this).find(".validation-summary-errors");
      var firstError = validator.errorList[0];

      $(container).html(firstError.message);
    }
    else {
      var container = $(this).find("[data-valmsg-summary=true]"),
            list = container.find("ul");

      if (list && list.length && validator.errorList.length) {
        list.empty();
        container.addClass("validation-summary-errors").removeClass("validation-summary-valid");

        $.each(validator.errorList, function () {
          $("<li />").html(this.message).appendTo(list);
        });
      }
    }
  }

基本上我们在OnError 中添加了一个条件来检查表单是否包含名为one-error 的css 类，如果是则显示一个错误，否则显示全部。