1

我使用 .net 4.5、MVC 4 并且我使用模型绑定器作为表单。我有一个 HTML 验证摘要，它将错误显示为一个列表，效果很好。

我想要做的是获取单个模型属性是否触发了基于 ModelState 的错误，如果是这样，给它一个“错误”CSS 类，它会变成红色。请看下文。

<div class="controls">
@{
    // does this element have an error??
    if (Model.LastName == error)
    {
        @Html.ValidationMessageFor(x => x.LastName)
        @Html.TextBoxFor(x => x.LastName, new { type = "text", id = "LastName", name = "LastName", value = Model.LastName, @class = "Error" })
    }
    else
    {
        @Html.ValidationMessageFor(x => x.LastName)
        @Html.TextBoxFor(x => x.LastName, new { type = "text", id = "LastName", name = "LastName", value = Model.LastName, })
    }
}
}

验证摘要

@{
    if (ViewBag.Error != null && ViewBag.Error == true)
    {
        <div class="alert alert-error">
            <h3>Error</h3>
            <p>@ViewBag.Message</p>
            <p>@Html.ValidationSummary(false)</p>                
        </div>
    }
    else if (ViewBag.Error != null && ViewBag.Error == false)
    {
        <div class="alert alert-success">
            <h3 style="color:green;">Details Updated Successfully Received</h3>
            <p style="color:green;">@ViewBag.Message</p>
        </div>
    }
}

模型

public class UpdateDetailsModel
{
    public VIPSessionObject VIPSessionObject { get; set; }

    [Required]
    [DataType(DataType.Text, ErrorMessage = "Please Enter your First Name")]
    public string FirstName { get; set; }

    [Required]
    [DataType(DataType.Text, ErrorMessage = "Please Enter your Last Name")]
    public string LastName { get; set; }

    [Required]
    [DataType(DataType.PhoneNumber, ErrorMessage = "Please Enter your Phone Number")]
    public string Telephone { get; set; }

    [Required]
    [DataType(DataType.EmailAddress, ErrorMessage = "Please Enter your Email Address")]
    public string Email { get; set; }

    [Required]
    [DataType(DataType.Password, ErrorMessage = "Please Enter your Motorpoint VIP Password")]
    public string Password { get; set; }

    [Required]
    [DataType(DataType.Password, ErrorMessage = "The Passwords must match")]
    [Compare("Password")]
    public string PasswordConfirm { get; set; }

    [Required]
    [DataType(DataType.Date, ErrorMessage = "Please Enter your Date of Birth")]
    public DateTime DateOfBirth { get; set; }

    [Required]
    public int VehiclesInHousehold { get; set; }

    [Required(ErrorMessage = "Please select the number of cars in your household")]
    public int NoOfVehicles { get; set; }
}
4

4 回答 4

3 
@Html.ValidationMessageFor(model => model.LastName, null, new { @class = "error" })

然后只需使用红色文本设置 .error CSS 类的样式，如果姓氏不符合模型数据注释指定的内容，它将使用模型属性注释中提供的错误消息。

于 2013-03-14T16:08:52.807 回答
0

在您的模型中，您可以删除：

 [DataType(DataType.Text, ErrorMessage = "Please Enter your Last Name")]

并将您的 [必需] 替换为：

 [Required(ErrorMessage ="Required Field")]

我过去读过使用 [DataType] 属性存在错误，我现在正在谷歌搜索以找到该文章。

于 2013-03-11T15:09:40.010 回答
0

对控件进行手动 JavaScript（或 JQuery）验证呢？最简单的例子：

function CheckForm()
{
    var elementValue = document.getElementById('elementId').Value;

    if(elementValue == null || elementValue == '')
    {
       document.getElementById('elementId').className = "Error";
    }
    else 
    {
       document.getElementById('elementId').className = "";
    } 
}

然后你可以在你的表单标签中使用它

<form method="POST" action="..."> 
... 
<input id="elementId" type="text" ... />
<input type="submit" onClick="CheckForm()" .../>
</form>

您可以执行任何验证。

或者

按照@Robert 的建议，为 Display、Required、DataType 设置 ErrorMessage 属性。

于 2013-03-13T22:10:28.660 回答
0

我不确定您的问题到底是什么，但任何新的 MVC 4 项目都带有验证助手的样式。他们来了：

 /* Styles for validation helpers
 -----------------------------------------------------------*/
 .field-validation-error {
   color: #f00;
 }

 .field-validation-valid {
   display: none;
 }

 .input-validation-error {
   border: 1px solid #f00;
   background-color: #fee;
 }

 .validation-summary-errors {
   font-weight: bold;
   color: #f00;
 }

 .validation-summary-valid {
   display: none;
 }

基本上，只要您有，当表单字段的验证失败时，这会给您一个红色文本：

 @Html.ValidationMessageFor(x => x.LastName)

在需要验证的表单字段旁边。您放置在视图模型上的模型和数据验证器看起来不错。

每个表单助手都有一个名为 HtmlAttributes 的可选参数，您可以通过它传递要在页面上呈现的任何 html 属性：

 @Html.TextBoxFor(x => x.LastName, null, new {@class = "Error"})

注意那里的 @ 符号，因为 class 是 C# 中的保留字...

于 2013-03-14T20:49:13.937 回答