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.unobstrusive.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.js OnErrors功能，如下所示，

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类，如果是，则显示单个错误，否则显示全部。

仅显示第一条错误消息

4 个答案:

编辑：客户端......