2011-05-07 45 views
2

在窗体上使用ASP.NET MVC验证时,错误消息在特定的html中输出。像例如,如果您要验证的是必须填写的文本框,验证后的输出失败会像这样:ASP.NET MVC验证 - 如何更改MVC验证引擎输出的html?

<label for="MonkeyName">Name: </label> 
<span class="field-validation-error">*</span> 
<br /> 
<input class="input-validation-error" id="MonkeyName" name="MonkeyName" type="text" value="" /> 

在上面的代码,跨度标签已被自动验证框架产生和一个名为input-validation-error的类被添加到文本框中。但是如果我想让验证器生成不同的html呢?

我想使用MVC验证框架,但是我希望对验证消息的显示方式进行全面控制,特别是自从MVC承诺控制UI。我设计的HTML和CSS(甚至在决定使用服务器端编程语言之前)对于错误消息是不同的,因为我想用文本框的容器而不是文本框本身来设置类。以此为例子:

<dl class="error"> 
    <dt> 
    <label for="email">Email</label> 
     <span class="required">Required</span> 
    </dt> 
    <dd> 
    <input class="textinput_med" id="FromEmail" name="FromEmail" type="text" value="" /> 
    <a href="#"><img src="Content/images/structure/help.png" width="30" height="30" alt="Help" /></a> 
    <span class="errormessage">Some Error</span> 
    </dd> 
</dl> 

虽然我有错误消息的跨度,我想设置的集装箱电子标签(DL)与命名错误CSS类。有没有一种方法可以确定错误消息由验证框架呈现的方式?

注意:尽管我已经考虑过使用jQuery来检测具有'input-validation-error'类的表单字段并使用我的自定义css类'错误'设置它们各自的容器的解决方案,但我不认为它是一个很好的解决方案,我认为这是一个可能更好的解决方法。如果解决了这个问题,我可以从MVC 2升级到MVC 3。

回答

0

听起来像是你需要编写编辑他们

namespace HtmlExtensions 
{ 
    public static HtmlString CustomValidateFor(this HtmlHelper helper, ...) 
    { 
     return Edit(helper.ValidateFor(...)) 
    } 
} 
0

一个角度,你可以追求将采取的ASP.NET MVC不引人注目的验证脚本一切是如何利用搜索内容的不同扩展方法表单中的元素具有data-valmsg-for="inputName"属性,并用field-validation-error类标记它们。所以,你可以通过添加属性要将容器与现有功能的工作:

<dl data-valmsg-for="FromEmail" data-valmsg-replace="false"> 
    <dt> 
    <label for="email">Email</label> 
    <span class="required">Required</span> 
    </dt> 
    <dd> 
    <input class="textinput_med" id="FromEmail" name="FromEmail" type="text" value="" /> 
    <a href="#"><img src="Content/images/structure/help.png" width="30" height="30" alt="Help" /></a> 
    </dd> 
</dl> 

然后,<dl>将得到field-validation-error类除了<input>。这里的缺点是你失去了验证错误信息。如果您使用的是验证摘要,那么这可能不是问题(您可以通过在容器中标记data-valmsg-summary="true"并将其放入<ul>来控制该容器)。

如果在框架内工作对您不适用,您可以随时根据自己的喜好调整jquery.validate.unobtrusive.js。一旦你了解了错误的样式/放置代码,相当简单(具体来说,请查看第39行和第55行的onErroronErrors函数)。