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, CommentedMar 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, CommentedMar 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, CommentedMar 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, CommentedMar 28, 2012 at 8:58
@musefan : it becomes wrong after post back, I'am doing the validation checj in the controller — kbaccouche, CommentedMar 28, 2012 at 9:15

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

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

@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/… — Richard Ev, CommentedJan 23, 2014 at 11:31

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

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>

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

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

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, CommentedOct 27, 2021 at 23:46

Collectives™ on Stack Overflow

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

3 Answers 3

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Linked

Related