MVC4:在验证错误时,将文本框颜色更改为红色

时间:2013-10-10 18:46:38

标签: css asp.net-mvc asp.net-mvc-4 jquery-validate unobtrusive-validation

我有一个包含一些文本框的表单,当文本框不包含有效值时,我收到错误消息,但文本框颜色不会变为红色。

这就是我所拥有的

模型

public class AddCompany
{
    public int Id { get; set; }

    [Required(ErrorMessage = "*Name is required")]
    public string Name { get; set; }

    [Required(ErrorMessage = "*Address is required")]
    [RegularExpression(@"^\(?([0-9]{4})\)?([A-Z]{2})",ErrorMessage = "*Not a valid Zip Code, Must be in format 1234AB")]
    public string Address { get; set; }

    [Required(ErrorMessage = "*Phone Number is required")]
    [DataType(DataType.PhoneNumber)]
    [RegularExpression(@"^\(?([0-9]{10})", ErrorMessage = "*Not a valid number, must be 10 numbers")]
    public string Phone { get; set; }

    [DataType(DataType.DateTime)]
    public DateTime DateTimeAdded { get; set; }
    public string Comment { get; set; }

}

查看

@model CrmTestProject.Models.ViewModels.AddCompany

@{
    ViewBag.Title = "AddCompany";
    Layout = "~/Views/shared/_BootstrapLayout.basic.cshtml";
}
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"></script>

<h2>AddCompany</h2>
@Html.ValidationSummary(true)

<fieldset class="form-horizontal">
    <legend>New Company <small>Add</small></legend>
    @using (Html.BeginForm("AddCompany", "Company"))
    {
        <div class ="controls">
            <label class="label">@Html.Label("Name")</label>
            <div class="input-block-label">@Html.EditorFor(model=>model.Name)
                @Html.ValidationMessageFor(model=>model.Name)
            </div>
            <br/>
            <label class="label">@Html.Label("Address")</label>
            <div class="input-block-level">@Html.EditorFor(model=>model.Address)
                @Html.ValidationMessageFor(model=>model.Address)
            </div>
            <br/>
            <label class="label">@Html.Label("Phone")</label>
            <div class="input-block-level">@Html.EditorFor(model=>model.Phone)
                @Html.ValidationMessageFor(model=>model.Phone)
            </div>
            <br/>
            <div class="input-block-level">@Html.TextAreaFor(model=>model.Comment)</div>
        </div>
        <div class="form-actions" id="buttons">
            <button type="submit" class="btn btn-primary" id="Submit">Save changes</button>
            @Html.ActionLink("Cancel", "CompanyIndex", new { @class = "btn" })
        </div>
    }
</fieldset>

浏览器ScreenShot enter image description here

正如您所看到的,我收到错误消息,但我也希望文本框,最好是错误消息颜色为红色。我不知道是不是由于引导程序。 但是当我检查这个blog for validation时,事情在这里完美起作用。 谁能给我一些建议?

2 个答案:

答案 0 :(得分:3)

只需将此css代码添加到您的样式中即可。无需更改任何js或您的观点。

input.input-validation-error,
textarea.input-validation-error,
select.input-validation-error
{
    background: #FEF1EC;
    border: 1px solid #CD0A0A;
}

答案 1 :(得分:-1)

在css中添加一个类并改变它的颜色:

@Html.ValidationMessageFor(model=>model.Address),"*Address is required",new { @class = "redclass" })