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
                                <button type="button" style="background-color: white !important;" data-bs-dismiss="modal">X</button>
                                    <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>
                                                        <button type="submit" class="btn btn-primary">
                                                            Create
                                                        </button>
                                    </EditForm>
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; }
						

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" >        
  • 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