MVC 2 Validation and Summaries

Question

Hi,

I am starting on MVC 2, and I was wondering how the validation summaries work? I thought that it would something similar to the ASP.NET web forms validation summary control. First of all, I am doing simple validation, which of these .js files are required?

<script src="<%= Url.Content("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/MicrosoftMvcValidation.js") %>" type="text/javascript"></script>

My current code looks like this:

<%: Html.TextBoxFor(model => model.ApplicationState) %>
<%: Html.ValidationMessageFor(model => model.ApplicationState) %>

I am using my own styles, and I want the text to display in red. Currently it is in black. If I go to view source then the class that is being used is field-validation-valid, there is a field-validation-error style as well. When is this class used? If my errors is displayed then the style that is used is field-validation-valid.

Should I go and create my own style called field-validation-valid or field-validation-error and make the text red?

Thanks.

Answer 1

Yes, you have to add the styles for errors to your .css. If you create new MVC 2 application, with the sample account/home controller, you can see that the styles are defined for errors in Site.css

.field-validation-error
{
    color: #ff0000;
}

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

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

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

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

These are the default. Obviously you can customize them further.

Regarding your first question: all of these script files are required.

Answer 2

The javascript files are only necessary if you want client side validation. Even then, you don't have to use the microsoft ajax ones. You could do it using jQuery validation as well.

If you want to provide your own classes for the validation helper methods there is an overload you can use:

<%= Html.ValidationMessageFor( m => m.ApplicationState, "Error Message", new { @class = "error-class" }) %>

If you want to include a validation summary (like the ASP.net validationsummary control) then there is a helper method for that as well:

<%= Html.ValidationSummary() %>

There are many overloads for the method so just check the documentation to see which one you want to use.