MVC 3 validation: want to turn my labels red that correspond to controls that failed validation - asp.net-mvc-3

Question

I am using MVC 3 validation. My Product Manager wants the label for each control that has an error to turn red.
So 'Student First Name' label should turn red. 'Email address' label should turn red.
I tried to wrap each error msg in a div and check the length of each div
<div id="divValStudentFirstName">#Html.ValidationMessageFor(m => m.studentFirstName)</div>
in a js file:
$(document).ready(function () {
if ($("#divValStudentFirstName").length > 1) {
("#divStudentFirstName").css("color", "red");
}
But I have no success. The validation check is done without a complete refresh and as a result, my $(document).ready isn't fired when validation hits.

Answer 1

Client side validation disabled :
public static IHtmlString ValidationLabelFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, string labelText = null) {
var metadata = ModelMetadata.FromLambdaExpression(expression, html.ViewData);
var name = ExpressionHelper.GetExpressionText(expression);
string resolvedLabelText = labelText ?? metadata.DisplayName ?? metadata.PropertyName ?? name.Split('.').Last();
if (String.IsNullOrEmpty(resolvedLabelText)) {
return MvcHtmlString.Empty;
}
var tag = new TagBuilder("label");
tag.Attributes.Add("for", TagBuilder.CreateSanitizedId(html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(name)));
tag.GenerateId(name);
tag.SetInnerText(resolvedLabelText);
ModelState modelState;
string fullName = html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(name);
if (html.ViewData.ModelState.TryGetValue(fullName, out modelState)) {
if (modelState.Errors.Count > 0) {
tag.Attributes.Add("style", "color:red");
}
}
return new MvcHtmlString(tag.ToString());
}
EDIT
Client side validation enabled
I'm really not a king in js, but this seems to work (well on a simple case at least)
$('form').submit(function () {
var form = $(this);
$('label').removeClass('field-validation-error');
if (!form.valid()) {
$('.input-validation-error')
.each(function () {
$("label[for='" + $(this).attr("id") + "']").addClass('field-validation-error');
});
}
});

Answer 2

Below is a JQuery function that will color the containing div tag by adding (or removing) an error class when the submit button is clicked. It can easily be changed to add the class to the label.
$('form').submit(function () {
if ($(this).valid()) {
$(this).find('div.form-group').each(function () {
if ($(this).find('span.field-validation-error').length == 0) {
$(this).removeClass('error-colored');
}
});
}
else {
$(this).find('div.form-group').each(function () {
if ($(this).find('span.field-validation-error').length > 0) {
$(this).addClass('error-colored');
}
});
}
});