Server Side Field validation in .NET Core 3.1 MVC in modal popup not working - asp.net-core-mvc

Question

I have a partial view within a modal popup. Client side field validation works, such as required fields. But there are some server side validations that don't present themselves whilst keeping the modal popup open.
For example, I create a new 'teacher band' and the controller checks for a duplicate band. When I press submit, the page actually browses to the partial view and presents the error in the validationsumary, rather than keeping it within the modal.
Controller -
public async Task<IActionResult> Add()
{
CreateTeacherBandViewModel model = new CreateTeacherBandViewModel();
return PartialView(model);
}
[HttpPost]
public async Task<IActionResult> Add(CreateTeacherBandViewModel model)
{
if (ModelState.IsValid)
{
if (await _teacherBandService.BandExists(model.BandName))
{
ModelState.AddModelError("", "A band with that name already exists");
return PartialView(model);
}
else
{
await _teacherBandService.Add(model);
return RedirectToAction("Index", "TeacherBand", null);
}
}
else
{
return PartialView();
}
}
Partial View
#model Models.CreateTeacherBandViewModel
<script src="~/assets/js/plugins/pickers/color/spectrum.js"></script>
<script src="~/assets/js/demo_pages/picker_color.js"></script>
#using (Html.BeginForm("Add", "TeacherBand", null))
{
<!-- Iconified modal -->
<div id="modal_addband" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header bg-primary text-white">
<h5 class="modal-title"><i class="icon-user-plus mr-2"></i> Add New Band</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Name</label>
#Html.TextBoxFor(model => model.BandName, new { #class = "form-control"})
#Html.ValidationMessageFor(model => model.BandName)
</div>
<h6 class="font-weight-semibold">Charge Rates</h6>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>AM</label>
#Html.TextBoxFor(model => model.DefaultChargeRateAM, new { #class = "form-control"})
#Html.ValidationMessageFor(model => model.DefaultChargeRateAM)
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>PM</label>
#Html.TextBoxFor(model => model.DefaultChargeRatePM, new { #class = "form-control"})
#Html.ValidationMessageFor(model => model.DefaultChargeRatePM)
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Daily</label>
#Html.TextBoxFor(model => model.DefaultChargeRateDaily, new { #class = "form-control"})
#Html.ValidationMessageFor(model => model.DefaultChargeRateDaily)
</div>
</div>
</div>
<h6 class="font-weight-semibold">Pay Rates</h6>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>AM</label>
#Html.TextBoxFor(model => model.DefaultPayRateAM, new { #class = "form-control"})
#Html.ValidationMessageFor(model => model.DefaultPayRateAM)
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>PM</label>
#Html.TextBoxFor(model => model.DefaultPayRatePM, new { #class = "form-control"})
#Html.ValidationMessageFor(model => model.DefaultPayRatePM)
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Daily</label>
#Html.TextBoxFor(model => model.DefaultPayRateDaily, new { #class = "form-control"})
#Html.ValidationMessageFor(model => model.DefaultPayRateDaily)
</div>
</div>
</div>
<hr />
<div class="form-group">
<label>Colour</label>
#Html.TextBoxFor(model => model.Colour, new { #class = "form-control"})
#Html.ValidationMessageFor(model => model.Colour)
</div>
#Html.ValidationSummary()
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Create Band</button>
</div>
</div>
</div>
</div>
<!-- /iconified modal -->
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js">
</script>
}
Finally, the Index page that renders the partial view
#Html.Partial("Add", new CreateTeacherBandViewModel())