仅显示一个错误信息(Show only first error message)

2019-07-29 15:10发布

我使用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

请参阅: 自定义的ValidationSummary模板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检查表单是否包含一个名为CSS类one-error ,如果是则显示一个错误别的显示所有。



文章来源: Show only first error message