MudTabs inside MudForm, Each tab has some form elements, Validation occures only if on that specific tab

Question

I have a MudForm, inside this I have a MudTabs that on each tab has some mudform elements, There is for example a required and stringlength validation on some of the Mud text fields, required is defined as a MudTextField validation and stringlength as fluent validation:

    <MudBlazor.MudForm Model="person" @onsubmit="ValidSubmit" @ref="frmMain"
                           @bind-Errors="@errors"
                           Validation="@(modelValidator.ValidateValue)">
            <MudBlazor.Paper Elevation="3" MinHeight="80vh" MinWidth="80vw">
                <MudBlazor.MudTabs Elevation="1" Rounded="true" PanelClass="pa-6">
                    <MudBlazor.MudTabPanel ID="1">
                        <TabContent>
                            <MudBlazor.MudText>person</MudBlazor.MudText>
                        </TabContent>
                        <ChildContent>
         <Stack Row="true" Spacing="2" AlignItems="AlignItems.Center" Justify="Justify.FlexStart" Class="mb-4">
             <MudBlazor.MudTextField Label="Register Code" Required="true"
                                     RequiredError="Register Code is required"
                                     For="@(() => person.PersonJuridical.RegisterCode)"
                                     @bind-Value="person.PersonJuridical.RegisterCode"
                                     Variant="MudBlazor.Variant.Text">
        
             </MudBlazor.MudTextField>
             ...
         </Stack>
            </ChildContent>
</MudBlazor.MudTabPanel>
    <MudBlazor.MudTabPanel ID="3">
        <TabContent>
            <MudBlazor.MudText>customer</MudBlazor.MudText>
        </TabContent>
        <ChildContent>
            <MudBlazor.MudPaper Elevation="3" Class="pa-4" MinWidth="80vw" MinHeight="80vh">
                <Stack Row="true" Spacing="2" AlignItems="AlignItems.Center" Justify="Justify.FlexStart">
                    <Select HelperText="group" T="int" Label="group"
                            Variant="MudBlazor.Variant.Text"
                            @bind-Value="@person.Customer.CustomerGroupId">
                        @foreach (var item in collections.CustomerGroups)
                        {
                            <MudBlazor.MudSelectItem Value="@item.Id">
                                @item.Text
                            </MudBlazor.MudSelectItem>
                        }
                    </Select>
    ...

and this is the method that passes validation if I am on the second tab. and I enter invalid data in the first tab:

 @code {
    
    MudBlazor.MudForm frmMain;
    async Task ValidSubmit()
    {
        await frmMain.Validate();
    
        if (frmMain.IsValid)
        {
            PersonDTO dto = new PersonDTO()
            {
                Person = person,
                Roles = selectedRoles.ToList(),
                UserPrograms = selectedPrograms.ToList()
            };
    
    ...
    }


    PesronModelFluentValidator modelValidator = new PesronModelFluentValidator();
    public class PesronModelFluentValidator : AbstractValidator<Person>
    {
        public PesronModelFluentValidator()
        {
           ...
            RuleFor(x => x.PersonJuridical.RegisterCode)
                .MaximumLength(20)
                .WithMessage("register code should be at most 20 characters");
            ...
    }

How to correct this so that after clicking submit, even if I am on a tab that does not require validation, and enter invalid data on another tab validation forbid submitting?

Answer 1

You need to set the tabs KeepPanelsAlive property to true, this way the inactive tabs are rendered but hidden using (display:none) instead of not being rendered at all.

MudBlazor Docs

<MudTabs KeepPanelsAlive="true">
    <!-- content -->
</MudTabs>