show email validation message( in red) in mvc razo

问题:

I have just started using mvc razor.

ANd I would like to show validation error messages in red.

Here is my viewmodel.

public class AViewModel
{
    [Required(ErrorMessageResourceName = "EmailAddressRequired", ErrorMessageResourceType = typeof(Resources))]
    [HomeController.EmailAddressAttribute(ErrorMessageResourceType = typeof(Resources), ErrorMessageResourceName = "EmailAddress_RegularExpression_ErrorMessage")]
    public string EmailAddress { get; set; }

    [HomeController.LocalizedDisplayNameAttribute("Password", NameResourceType = typeof(Resources))]
    [Required(ErrorMessageResourceName = "PasswordRequired", ErrorMessageResourceType = typeof(Resources))]
    [DataType(DataType.Password)]
    public string Password { get; set; }

    [HiddenInput(DisplayValue = false)]
    public Guid id { get; set; }
}

My view looks something like this:

<div class="left">      

    @Html.EditorForModel()
    <br />

</div>

And my css looks like this:

.left { float:left; width:430px; margin:0 -480px 0 0;
       padding:0 40px 20px 0; border-right:1px solid #DDD;}

What needs to be changed in css?

In side the view I have used @Html.EditerForViewModel(). the validation messages in currently shown in black. is there any to show in red?

回答1:

You probably forgot to include the css file generated with typical ASP.NET MVC project in your page. By default it is named as site.css. It is also included in the default layout view in Views/Shared/_Layout.cshtml. If you have created a page and not using the layout, you could include it in your view.

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

If you don't have the css file, you could create one manually and have following in it

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

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

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

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

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

You could copy the whole css from another project (create a new project and discard it) if you have accidentally deleted it from your current project.

回答2:

if you right click the span tag for the validation message, you will find something like class="field-validation-error" in the error message. In your style sheet you can simply add a property to set the font color using color:red; and will to the trick!.

Jonathan