I have an ASP.net Core MVC view with several Bootstrap 4 tabs. Each tab reveals parts of the form fields which are part of the ViewModel.
Each tab has its own form and controller it posts to with a button, and that works well.
However, when any of the forms is posted, validation triggers for all form fields on all tabs.
<div class="col-lg-12">
<ul class="nav nav-tabs nav-tabs-inverse nav-justified nav-justified-mobile" data-sortable-id="index-2">
<li class="nav-item"><a href="#tab1" data-toggle="tab" class="nav-link active"><i class="fa fa-city fa-lg m-r-5"></i> <span class="d-none d-md-inline">Details</span></a></li>
<li class="nav-item"><a href="#tab2" data-toggle="tab" class="nav-link"><i class="fa fa-phone fa-lg m-r-5"></i> <span class="d-none d-md-inline">Scheduled Calls</span></a></li>
</ul>
<div class="tab-content" data-sortable-id="index-3">
<div class="tab-pane active show" id="tab1">
<form asp-action="Details">
.....form and button here
</form>
</div>
<div class="tab-pane active show" id="tab2">
<form asp-action="ScheduleCall">
.....form and button here
</form>
</div>
</div>
</div>
Is there any way that DataAnnotations validation on the ViewModel will only trigger for the visible fields, or any similar way of doing this?
I've tried splitting each tab into sub objects but this has no effect.
I found this question, though they seem to be going into the weeds with JQuery. Require validation only if the field is visible
Is there an MVC Core way to do this that's best practice / doesn't require custom JavaScript?