定制ValidationForMessage帮手移除元素的CSS [英] custom ValidationForMessage helper removing css element
问题描述
喜有一个HTML帮助,让我到一个不同的样式应用到ValidationForMessage。
Hi have an html helper that allows me to apply a different style to the ValidationForMessage.
我的问题是如何将我打入验证事件要么改变消息的CSS元素或引发一些JavaScript?
My question is how to I tap into the validation event to either change a css element of the message or trigger some javascript?
我的code看起来像
public static MvcHtmlString ValidationStyledMessageFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper,Expression<Func<TModel, TProperty>> ex)
{
var result = htmlHelper.ValidationMessageFor(ex);
var res = string.Format("<span class=\"required-field\"></span> <span class=\"error required hidden\"><p>{0}<a class=\"close\" href=\"javascript:closeError();\"></a></p></span>", result.ToHtmlString());
return MvcHtmlString.Create(res);
}
正如你可以看到我有一类就是隐藏的跨度。我想发生这样的是,每当应显示的验证消息我删除隐藏CSS类。
As you can see I have a span with a class that is hidden. What I would like to happen is whenever the validation message should be shown I remove the hidden css class.
任何帮助将是非常美联社preciated。
Any help would be much appreciated.
推荐答案
下面是你如何才能够着手:
Here's how you could proceed:
public static MvcHtmlString ValidationStyledMessageFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> ex)
{
var expression = ExpressionHelper.GetExpressionText(ex);
var modelName = htmlHelper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(expression);
var modelState = htmlHelper.ViewData.ModelState[modelName];
var modelErrors = modelState == null ? null : modelState.Errors;
var modelError = ((modelErrors == null) || (modelErrors.Count == 0))
? null
: modelErrors.FirstOrDefault(m => !String.IsNullOrEmpty(m.ErrorMessage)) ?? modelErrors[0];
var result = htmlHelper.ValidationMessageFor(ex);
if (modelError != null)
{
// There was an error => remove the hidden class
return MvcHtmlString.Create(string.Format("<span class=\"required-field\"></span> <span class=\"error required\"><p>{0}<a class=\"close\" href=\"javascript:closeError();\"></a></p></span>", result.ToHtmlString()));
}
return MvcHtmlString.Create(string.Format("<span class=\"required-field\"></span> <span class=\"error required hidden\"><p>{0}<a class=\"close\" href=\"javascript:closeError();\"></a></p></span>", result.ToHtmlString()));
}
更新:
如果您有客户端验证激活,您还需要插入的jQuery验证插件,然后手动指示如何为您自定义的标记彰显/ unhighlight错误域。这可以通过简单地覆盖的插件的默认值来完成:
If you have client side validation enabled you will also need to plug into the jquery validate plugin and manually indicate how to highlight/unhighlight error fields as you have customized the markup. This can be done by simply overriding the default values of the plugin:
<script type="text/javascript">
$.validator.setDefaults({
unhighlight: function (element, errorClass, validClass) {
$(element).siblings('span.error').addClass('hidden');
},
highlight: function (element, errorClass, validClass) {
$(element).siblings('span.error').removeClass('hidden');
}
});
</script>
这篇关于定制ValidationForMessage帮手移除元素的CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!