Search code examples
asp.net-mvc-3validationrazor

Change the CSS class of an input on validation error with razor

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 wrong text field to "login_lbl_error".

Any ideas ?

Thanks.

Solution

  • With MVC3, an input-validation-error CSS class will automatically be added to to the input elements which have validation errors.

    Therefore in your CSS you can style this class:

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