我使用ASP.NET MVC3对于同时具有服务器和客户端验证的一种形式。 我显示错误消息作为输入上述气球。 由于错误的陈述,我只需要一次显示一个错误,否则气球往往掩盖其他领域也可能是错误的。
我如何自定义验证行为仅使第一个错误信息?
编辑:请注意,形式有服务器和客户端验证,而我只是想显示的第一个错误消息对于整个形式(而不是每场)。
我使用ASP.NET MVC3对于同时具有服务器和客户端验证的一种形式。 我显示错误消息作为输入上述气球。 由于错误的陈述,我只需要一次显示一个错误,否则气球往往掩盖其他领域也可能是错误的。
我如何自定义验证行为仅使第一个错误信息?
编辑:请注意,形式有服务器和客户端验证,而我只是想显示的第一个错误消息对于整个形式(而不是每场)。
如果有人需要它,我想出了一个解决方案是实现页面的底部添加下面的脚本。 这挂接到现有的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>
难道这给一个镜头在你的控制器动作
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);
}
我只是只选择每个属性的错误之一,清除所有错误,然后加入个别回来。
这是完全未经测试,但应该工作。
你可以创建这将只显示第一个错误的自定义验证摘要。 这可以通过创建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);
创建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
,如果是则显示一个错误别的显示所有。