Why doesn't ASP.Net MVC client side validation trigger where input is outside form element, but linked via form="formid" attribute?

Question

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.

FYI: This does not answer my own question. But a workaround I am using is to ensure ALL inputs that belong in the main "addEditForm" is wrapped in the <form> tag. But that other forms which would have been nested remain with empty tags. Luckily I have no need to run client side validation on the nested forms so I can get away with this. Cannot post solution due to character limit. But essentially... <form id="nestedForm"></form> <form id="clientSideValidationForm"> <input form="clientSideValidationForm" /> <input form="nestedForm" /> </form> — RyanO
– RyanO, Commented Jul 23, 2024 at 16:06

asmak9 · Accepted Answer · 2024-07-23 05:13:29Z

0

Under your form tag add below line of code

HtmlHelper.UnobtrusiveJavaScriptEnabled = false;

This property will disabled the server-side validation and activates the client side validations first.

answered Jul 23, 2024 at 5:13

asmak9

2722 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RyanO Over a year ago

I don't want to disable server-side validation.

asmak9 Over a year ago

This don't disabled the server-side validation, but, allows client -side validation to happen first and response. If it passes only then it will go to server-side for validation

Collectives™ on Stack Overflow

Why doesn't ASP.Net MVC client side validation trigger where input is outside form element, but linked via form="formid" attribute?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related