Question

我使用.net 4.5，MVC 4和im使用模型绑定器表单。我有一个HTML验证摘要，它将错误显示为列表，工作正常。

我想要做的是获取一个Model Property是否触发了基于ModelState的错误，如果是，请给它一个“Error”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]替换为：

 [Required(ErrorMessage ="Required Field")]

我过去曾读过使用[DataType]属性的错误，我现在正在谷歌搜索文章。

Answer 3

控件的手动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>

您可以执行任何验证。

OR

将Display，Required，DataType的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)

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

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

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

注意那里的@符号，因为class是C＃...

中的保留字

MVC模型绑定器 - 获取单个表单错误

4 个答案: