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
– Adriano Repetti, Commented Mar 28, 2012 at 8:39
Oh I didn't know about this input-validation-error, do I need to do on a certain event? — kbaccouche
– kbaccouche, Commented Mar 28, 2012 at 8: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
– Adriano Repetti, Commented Mar 28, 2012 at 8: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
– musefan, Commented Mar 28, 2012 at 8:58
@musefan : it becomes wrong after post back, I'am doing the validation checj in the controller — kbaccouche
– kbaccouche, Commented Mar 28, 2012 at 9:15

Curtis · Accepted Answer · 2012-03-28 08:50:53Z

8

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, 2012 at 8:50

Curtis

104k69 gold badges280 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ayyash Over a year ago

and there is no way to override that classname?

Richard Ev Over a year ago

@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 stackoverflow.com/questions/11468130/…

Muhammad Mobeen Qureshi · Accepted Answer · 2016-01-06 10:59:22Z

4

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>

answered Jan 6, 2016 at 10:59

Muhammad Mobeen Qureshi

1,1929 silver badges17 bronze badges

Comments

dekanidze · Accepted Answer · 2021-02-24 22:44:51Z

2

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, 2021 at 22:44

dekanidze

1622 silver badges12 bronze badges

1 Comment

DaleyKD Over a year ago

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");

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related