issue open new bootstrap modal still show validation error when form loaded ?

Question

I work on blazor app with .NET core 7 . I face issue validation not reset or removed after open new modal .

Issue display on step 5 when open New Bootstrap Modal

so my scenario as below for details by steps :

1- I click button add New server so bootstrap modal opened and loaded .

2- I will leave server name empty then click button submit .

3- I will get message error validation server name is empty .

4- I will close bootstrap modal to add new server .

5- After I open bootstrap modal again to add new server so issue display so issue validation still exist

so How to reset validation when open new modal bootstrap to add New Server ?

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
                            <div class="modal-dialog modal-lg modal-dialog-centered">
                                <div class="modal-content">
                                    <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel" style="margin-right:100px;">
                                            Add New Server
                                   
                                        </h5>
                                <button type="button" style="background-color: white !important;" data-bs-dismiss="modal">X</button>
                                    </div>
                                    <EditForm Model="@sn" OnValidSubmit="submit">
                                        <DataAnnotationsValidator></DataAnnotationsValidator>
                                        <ValidationSummary style="color:red"></ValidationSummary>
                                        <div class="modal-body">
                                            <div class="d-flex flex-row bd-highlight mb-3">
                                                <div class="p-2 w-100 bd-highlight">
                                                   
                                                    <div class="form-group row">
                                                        <label for="example-text-input" class="col-3 col-form-label">Server Name</label>
                                                        <div class="col-9">
                                                            <input type="text" class="form-control" @bind="@sn.Server_Name" />
                                                            <ValidationMessage For="@(() => sn.Server_Name)" style="color:red"></ValidationMessage>
                                                        </div>
                                                    </div>
                                                    
                                                 
                                                        <button type="submit" class="btn btn-primary">
                                                            Create
                                                        </button>
                                                    
                                                   
                                                </div>
                                            </div>


                                        </div>
                                    </EditForm>
                                </div>

                            </div>

                        </div>
blazor component

@code
{
   private ServerNames sn = new ServerNames();
}
my modal servers

 public class ServerNames
    {
        [Key]
        public int ServerID { get; set; }
        [Required(ErrorMessage = "Server name is required")]
        public string Server_Name{ get; set; }
    }

Answer 1

Hi @Ahmed Salah Abed Elaziz ,

How to reset validation when open new modal bootstrap to add New Server, you can refer to below:

1.Add @onclick="OnInitialized" in your close/X button,

 <button type="button" style="background-color: white !important;" @onclick="OnInitialized" data-dismiss="modal">X</button>

2.Change you EditForm to use EditContext

<EditForm EditContext="editContext"  OnValidSubmit="Submit" >        

3. Add the HandleValidationRequested handler method clears any existing validation messages by calling ValidationMessageStore.Clear before validating the form.

@code{
    private ServerNames sn = new ServerNames();  
    private EditContext? editContext;
    private ValidationMessageStore? messageStore;
    private void Submit()
    {
        Console.WriteLine($"{sn.Server_Name},{sn.ServerID}");
    }
    protected override void OnInitialized()
    {
        editContext = new(sn);
        editContext.OnValidationRequested += HandleValidationRequested;
        messageStore = new(editContext);
       
    }
    private void HandleValidationRequested(object? sender,
        ValidationRequestedEventArgs args)
    {
        messageStore?.Clear();
      
    }
}

4.result:

-

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Qing Guo