I am using ASP.Net 8.0 MVC…
ScenarioName property has a Required attribute in the Model..
When I use the following, clicking submit button with all of these elements wrapped inside the form tag works as expected!
Meaning Client side validation is triggered and the required validation message is displayed before posting to the server.
<form id="addEditForm" asp-action="ScenarioDetailsAddEdit" asp-route-id="@Model.Scenario.ScenarioId">
<input form="addEditForm" form="addEditForm" asp-for="ScenarioVersion.ScenarioName" class="form-control body-text element-border" />
<span asp-validation-for="ScenarioVersion.ScenarioName" class="body-text-error"></span>
<input form="addEditForm" class="rounded-button button-text" style="width: 100%;" type="submit" value="Save" />
</form>But when I have an empty form tag and rely on the form attribute to associate inputs, the post works fine and server side validation does it’s job, but the client side validation is no longer triggered.
<div>
<form id="addEditForm" asp-action="ScenarioDetailsAddEdit" asp-route-id="@Model.Scenario.ScenarioId">
</form>
<form id="deleteForm" asp-action="ScenarioDetailsDelete" asp-route-id="@Model.Scenario.ScenarioId">
</form>
</div>
<div>
<input form="addEditForm" form="addEditForm" asp-for="ScenarioVersion.ScenarioName" class="form-control body-text element-border" />
<span asp-validation-for="ScenarioVersion.ScenarioName" class="body-text-error"></span>
<!-- Much detail missing for brevity -->
<input form="deleteForm" class="rounded-button button-text" style="width: 100%;" type="submit" value="Delete" />
<!-- Much detail missing for brevity -->
<input form="addEditForm" class="rounded-button button-text" style="width: 100%;" type="submit" value="Save" />
</div>My question is why and which client side code specifically is the reason for this? But also, apart from ensuring all input’s are inside the form tag, what might be the best solution?
For additional background, the reason I am using the approach causing the issue is because I have multiple forms in the HTML (which cannot be nested), but have inputs for the other forms which must appear inline alongside the original form inputs.
E.g. I have a Delete form and the Delete button input and other Delete form inputs must appear next to inputs belonging to the original form.