Adding custom CSS to element when unobtrusive validation failed

Question

I'm trying to add a CSS class to a textbox when validation fails.

@Html.TextBoxFor(x => x.AdminUser.Username, new
{
    @id = "Username",
    @name = "Username",
    @type = "text",
    @class = "form-control",
    @placeholder = "Kullanıcı Adı",
    @autocomplete = "off"
})
@Html.ValidationMessageFor(x => x.AdminUser.Username, null, new { @class = "text-danger text-12 pl-10" })

Is it possible to add a callback to it? Or anyway else?

Solution for me:

Overriding onError class of unobtrusive validation source js did the trick. Now I can able to access upper div element.

    if (replace) {
        container.empty();
        error.removeClass("input-validation-error").appendTo(container);
        error.closest("div").addClass("has-error");
    }

adiga · Answer 1 · 2017-09-16T14:03:59.067

1

The input will be added with input-validation-error class when the validation fails. So you can override that class like this with your custom styles:

.input-validation-error {
    // your styles
}

If you add the above style to your page it will affect all inputs. So, if you want to target specific elements, you can add a custom-error-message class

.custom-error-message.input-validation-error{
    // error styles
}

And then in the TextBox you want to target:

@Html.TextBoxFor(x => x.AdminUser.Username, new { @class = "custom-error-message form-control"})

Now your custom error styles will be added only to those with inputs with custom-error-message class.

edited Sep 16 '17 at 14:03

answered Sep 16 '17 at 13:17

adiga

34,372
9
61
83

Thanks for your advice adiga. But what I'm trying to do is running a function or overwrite existing one. Not overriding CSS class. – Alparslan Sep 16 '17 at 13:30
@AlparslanParlak This will overwrite the default CSS – adiga Sep 16 '17 at 13:49

Adding custom CSS to element when unobtrusive validation failed

1 Answers1