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