Trigger field validation when other field is changed using MudBlazor and FluentValidation

Question

I have a form with two switches, in which I want to ensure that at least one of the switches is ON. I also want the validation error message to disappear from any of the switches if that condition applies, that is, if the other switch is updated to ON.

Currently I've only managed to get the switches to be validated independently, as this example shows https://try.mudblazor.com/snippet/wOQxkxmuxEyoZIVg

How can I force both switches to be validated (and their error message updated) when any of them is changed?

I've also tried to use this proposal (made for EditForm instead of MudForm) Trigger Validation of a related property (FluentValidation) with no success.

Answer 1

You can trigger validation on both the switches when any of them change by using the CheckChanged EventCallback docs.

• Add a @ref for each MudSwitch<bool> and create their fields.
• Replace @bind-Checked with the Changed property (as this also uses the EventCallback).

<MudForm Model="@model" @ref="@form" Validation="@(model.ValidateModel)">
    <MudSwitch @ref="switchC" Checked="@model.IsC" For="@(() => model.IsC)" Color="Color.Primary" CheckedChanged="@(async (bool e) => { model.IsC = e; await ValidateSwitches(); })">C</MudSwitch>
    <MudSwitch @ref="switchS" Checked="@model.IsS" For="@(() => model.IsS)" Color="Color.Primary" CheckedChanged="@(async (bool e) => { model.IsS = e; await ValidateSwitches(); })">S</MudSwitch>
</MudForm>
@code 
{

    MudSwitch<bool> switchC;
    MudSwitch<bool> switchS;
    private async Task ValidateSwitches()
    {
        await switchC.Validate();
        await switchS.Validate();
    }
}

Now the switches will run your own validation logic when toggled and they will also be validated when the form is validated.

MudBlazor snippet