haacked/aspnet-client-validation

[Docs] Changing css class names

lonix1 opened this issue · 2 comments

Apparently it's possible to change the default css class names, so we could use this library with bootstrap (for example).

But I can't find mention in the README, and haven't been able to figure it out.

Does someone know how to use the feature?

Looking at the code, it looks like you set these properties on ValidationService:

  • ValidationInputCssClassName - Override CSS class name for an input that has a validation error. Default: 'input-validation-error'
  • ValidationInputValidCssClassName - Override CSS class name for a valid input. Default: 'input-validation-valid'
  • ValidationMessageCssClassName - Override CSS class name for field validation error. Default: 'field-validation-error'
  • ValidationMessageValidCssClassName - Override CSS class name for valid field validation. Default: 'field-validation-valid'

For example, it might look like the following if you're using TypeScript or ES modules:

import 'ts-polyfill';
import { ValidationService } from 'aspnet-client-validation';

let v = new ValidationService();
v.ValidationInputCssClassName = 'my-input-error-class';
v.ValidationMessageCssClassName = 'my-field-error-class';
v.bootstrap();

Try it out and let me know if it works. I'll try it when I'm back home.

Aaargh I was hoping to avoid all that complexity for a simple Razor Pages project. 😄

I just have a few uninteresting JS files in my /wwwroot, with the old "on document ready do the following" sort of scripts, nothing fancy. I'll try adapt your code for my use case and report back here. I imagine both approaches would be useful to have in the docs. Thanks for putting me on the right path.