Custom validation class attributes
By simply using the edit form, input components, and DataAnnotationValidator, the framework will automatically add classes to the components when it is and isn’t valid.
By default, these classes are .valid and .invalid. In .NET 5, we were given a way to customize these class names ourselves.
When using Bootstrap, the default class names are .is-valid and .is-invalid , and the list of class names must also include .form-control to get the proper styles.
The next component we build will help us get the proper Bootstrap styling on all our form components.
We will create our own FieldCssClassProvider to customize what classes Blazor will use:
- In the
SharedComponentsproject, inside theResuableComponentsfolder, add a new class calledBootstrapFieldCssClassProvider.cs. - Open the new class and add the following code:
using Microsoft.AspNetCore.Components.Forms; namespace SharedComponents.ResuableComponents...