How to show/change style around control fails during form validation?

Radzen.Blazor Components
1

I am using Radzen Blazor free components in my .Net Core 6.0 Blazor application.
RadzenTemplateForm works fine as it validates the form and shows "validation message" configured with RadzenRequiredValidator component. But it does not show red-colored border around the input component. How to change the styling for the invalid/erroneous input controls during form submission (like attached).
Pl advise.
image

1 Like
2

Blazor form validation (which Radzen uses under the hood) applies two CSS classes to the components - valid and invalid. You can use them to customize the appearance.

1 Like
3

Okay, will use them. thanks.

4

If you get this to work could you share the code. I actually submitted this as a feature request on github.

5

Here is an example for RadzenTextBox:

    .rz-textbox.invalid {
        border: 1px solid red;
    }

image
image1194×640 45 KB

1 Like
6

How we can simulate/firing submit event from code?!

7

You can probably use something like this:

<RadzenTemplateForm TModel="MyModel" @ref="@form" ...>

@code {
    RadzenTemplateForm<TModel> form;

    void TriggerValidation()
    {
        form.EditContext.Validate();
    }
}
1 Like
8

Does not work because EditContext is null :worried:

9

EditContext will be null unless you set the Data property as well. I have omitted that from the example.