MVC模型粘结剂 - 获取个人表格错误

Question

即时通讯使用.net 4.5，MVC 4和IM使用模型粘结剂的形式。我有一个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; } 
} 

Answer 1

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

然后简单风格的红色文字您.error CSS类，如果姓不符合你的模型数据注解指定，它会使用在你的模型属性注释提供的错误信息。

Answer 2

在你的模型，你可以删除：

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

并替换[必填]有：

[Required(ErrorMessage ="Required Field")] 

我已经看了过去有与使用[数据类型]属性的错误，我周围的Googling现在找到的文章。

Answer 3

对于控件的手动JavaScript（或JQuery）验证如何？该simpliest例如：

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> 

您可以执行任何验证。

OR

的显示设置ErrorMessage属性，所要求的数据类型为@Robert建议。

Answer 4

我不确定你的问题到底是什么，但任何新的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"}) 

公告@符号是那里，因为类是保留字C＃...