Adding classes to Blazor(Razor) Validation

Question

I know things are still pretty early in the Blazor development track, but I'm wondering if anyone has come across a way to apply classes to a Blazor (Razor) validation message? Here's a sample of code.

        <EditForm Model="@Employee" OnValidSubmit="@HandleValidSubmit">
        <DataAnnotationsValidator />
        <ValidationSummary />
        <div class="form-group row">
            <label for="lastName" class="col-sm-3">Last Name: </label>
            <div class="col-sm-8">
                <InputText id="lastName" @bind-Value="@Employee.LastName" class="form-control" placeholder="Enter last name" />
                <ValidationMessage For="@(() => Employee.LastName)" />
            </div>
        </div>

I'd like to be able to add a text-danger, col-sm-8 or other classes to the validation message. I already know that I could do it with CSS using the default validation-error class.

Answer 1

As suggested above, you can subclass the ValidationMessage component class... I'll give you a simpler solution, since I prefer not to have a myriad of classes on my projects just for changing the appearance a little.

Just wrap the ValidatorMessage with a div and apply classes to it:

<div class="col-sm-8 text-danger">
    <ValidationMessage For="@(() => Employee.LastName)" />
</div>

Anyway, what the ValidationMessage component does (by code) is rendering a simple div with the class "validation-message" so, if you have problems with any style not being applied, take into account that you can force styles using the right CSS selectors (and maybe some !important tags...).