I have a long history with asp.net Web Forms and have recently moved to Blazor and im loving it! I am creating some forms in Blazor and wondered if Blazor has ValidationGroups like they did in Web Forms. Say for example I have two forms on one page, eg Login Form and Create New Account Form (both are the same model). Each has its own button. But I want each button to validate its group of fields, eg Email is valid, required fields are populated etc... I see that Required field is put on the Model, which is neat. But in this instance both forms use the same model and are on the same page. Do I do the validation on button click of each form - but this seems to generate a lot of code and a bit messy. Web Forms Groupa Validation was very neat where you could group controls together including the submit button.

TIA

CodePudding user response：

Here's a starting point. This has a single model instance that both forms are linked to. The validation is part of the form so tracked separately for each form. I've linked to the same field, but you could have each form link to different fields within the same model.

@page "/"
@using Microsoft.AspNetCore.Components;
@using Microsoft.AspNetCore.Components.Forms;
@using System.ComponentModel.DataAnnotations;

<h2>Login 1</h2>
<EditForm EditContext="this._editcontext1" OnValidSubmit="this.OnValidSubmit1">
    <DataAnnotationsValidator />
    <div >
        <div >
            User Name:
        </div>
        <div >
            <InputText @bind-Value="this._model.UserName"></InputText>
        </div>
        <div >
            <ValidationMessage For="() => this._model.UserName"></ValidationMessage>
        </div>
    </div>
    <div >
        <button type="submit">Submit</button>
    </div>
</EditForm>

<h2>Login 2</h2>
<EditForm EditContext="this._editcontext2" OnValidSubmit="this.OnValidSubmit1">
    <DataAnnotationsValidator />
    <div >
        <div >
            User Name:
        </div>
        <div >
            <InputText @bind-Value="this._model.UserName"></InputText>
        </div>
        <div >
            <ValidationMessage For="() => this._model.UserName"></ValidationMessage>
        </div>
    </div>
    <div >
        <button type="submit">Submit</button>
    </div>
</EditForm>

@code {
            private EditContext? _editcontext1;
        private EditContext? _editcontext2;

        private Model _model = new Model();
        
        protected override Task OnInitializedAsync()
        {
            _editcontext1 = new EditContext(_model);
            _editcontext2 = new EditContext(_model);
            return base.OnInitializedAsync();
        }

        private async Task OnValidSubmit1()
        {
            await Task.Delay(1000);
        }

        private async Task OnValidSubmit2()
        {
            await Task.Delay(1000);
        }
        class Model
        {
            [Required]
            public string? UserName { get; set; }
        }

}