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

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

Any ideas ?

Thanks.

DId you try to use jquery to change their class from **input-validation-error** to whatever you need? — Adriano Repetti, Mar 28 '12 at 08:39
Oh I didn't know about this input-validation-error, do I need to do on a certain event? — kbaccouche, Mar 28 '12 at 08:44
You can attach a handler to the submit event of your form, there you can change all inputs with that class to login_lbl_error. As alternative you may simply use "input-validation-error" :) — Adriano Repetti, Mar 28 '12 at 08:48
The question I think is... when does it become wrong? On button click with client validation? or after post back? where are you doing the validation check? — musefan, Mar 28 '12 at 08:58
@musefan : it becomes wrong after post back, I'am doing the validation checj in the controller — kbaccouche, Mar 28 '12 at 09:15
MVC recommends to do it a specific way, using Html.TextBoxFor etc, where your element names should match your view model properties. you should check [this out](http://www.devtrends.co.uk/blog/the-complete-guide-to-validation-in-asp.net-mvc-3-part-1) — musefan, Mar 28 '12 at 09:48

score 7 · Accepted Answer · answered Mar 28 '12 at 08:50

7

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;
}

answered Mar 28 '12 at 08:50

Curtis

101,612
66
270
352

6

and there is no way to override that classname? – Ayyash Sep 30 '13 at 13:44
2

@Ayyash You cannot override the CSS class name as such, but you can get additional ones applied when there is an error. See my answer at http://stackoverflow.com/questions/11468130/twitter-bootstrap-integration-to-asp-net-mvc-validation/21167935#21167935 – Richard Ev Jan 23 '14 at 11:31

score 4 · Answer 2 · answered Jan 06 '16 at 10:59

By default MVC adds input-validation-error and 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>

score 1 · Answer 3 · answered Feb 24 '21 at 22:44

1

Since ASP.NET MVC adds the field-validation-error class to the error message element, and input-validation-error to form controls, I just changed the class name using jQuery:

$(".input-validation-error").toggleClass("input-validation-error newClassName");

answered Feb 24 '21 at 22:44

dekanidze

132
2
9

Why hasn't this answer received my attention? This seems a lot easier/faster than doing tag helpers, MvcHtmlStrings, etc. I ended up putting this at the start of my main.js: $(".input-validation-error").removeClass("input-validation-error").addClass("is-invalid"); $('.field-validation-error').removeClass("field-validation-error").addClass("invalid-feedback"); – DaleyKD Oct 27 '21 at 23:46

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

3 Answers3