Change the CSS class of the input to a razor validation error

Question

In my ASP MVC 3 application, I have this form

@using (Html.BeginForm())
  {
    <input id="Username" name="UserName" type="text" value="Username" class="form-text" />
    <input id="PasswordTxt" name="PasswordTxt" type="text" value="Password" class="form-text" />
    <input id="Password" name="Password" type="password" class="form-text" style="display: none"/>
    <input id="bt_login" type="submit" value="Log in" class="bt_login" />
    <div class="login_lbl_error">
      @Html.ValidationSummary()
    </div>
  }

I want to change the class of each invalid text field to "login_lbl_error".

Any ideas?

Thank.

Answer 1

With MVC3, the input-validation-errorCSS class will be automatically added to input elements that have validation errors.

Therefore, in your CSS, you can style this class:

.input-validation-error
{
   color:red;
}

Answer 2

By default, MVC adds an input-validation error and a field validation error, you can use jQuery to override these classes:

<script type="text/javascript">
    $(document).ready(function(){
        $('.input-validation-error').addClass('CustomErrorClass').removeClass('input-validation-error');
        $('.field-validation-error').addClass('CustomErrorClass').removeClass('field-validation-error');
    });
</script>

Run codeHide result