You have to use the EditContext with EditForm to validate the forms inside a bootstrap modal.
@using System.ComponentModel.DataAnnotations;
<div id="modalDialog" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<EditForm EditContext="@EC">
<DataAnnotationsValidator />
<ValidationSummary />
<div class="form-group d-flex justify-content-between">
<label class="col-form-label col-3" for="name">Name</label>
<InputText bind-Value="@model.Name" id="name" Class="form-control" />
</div>
@if (EC.Validate())
{
<button type="button" onclick="@SubmitHandler" class="btn btn-primary" data-dismiss="modal">Submit</button>
}
else
{
<button type="button" onclick="@SubmitHandler" class="btn btn-primary">Submit</button>
}
</EditForm>
</div>
</div>
</div>
</div>
<button data-toggle="modal" data-target="#modalDialog" class="btn btn-primary">Open</button>
@code {
public class ModelClass
{
[Required]
public string Name { get; set; }
}
private ModelClass model { get; set; } = new ModelClass();
private EditContext EC { get; set; }
private void SubmitHandler()
{
Console.WriteLine("Submit");
}
protected override void OnInitialized()
{
EC = new EditContext(model);
base.OnInitialized();
}
}
Share with