Manually validating a dynamically added form

[max-maurice]

After adding a form to the DOM (with watch enabled), a call to isValid() fails, when submitting the form:

window.validationService.isValid(form, false);

The error TypeError: formInputUIDs is undefined occurs at

aspnet-client-validation/src/index.ts

Line 770 in f84dcb4

let invalidFormInputUIDs = formInputUIDs.filter(uid => this.summary[uid]);

Variables:

Simplified form markup:

<form method="post" action="https://localhost:7222/item/disableitem/20/">
	<div class="validation-summary-valid" data-valmsg-summary="true"><ul><li style="display:none"></li></ul></div>
	<button type="submit">Yes</button>
	<input name="__RequestVerificationToken" type="hidden" value="xxx">
	<button type="button">No</button>
</form>

[LiteracyFanatic]

I was getting the same error but eventually realized the issue was being caused by trying to pass a wrapper element instead of the form itself to the isValid function by mistake. Maybe the library could check that the input is actually a form and throw a helpful error message if it isn't?

[haacked]

Maybe the library could check that the input is actually a form and throw a helpful error message if it isn't?

That sounds like a good idea. Want to make a contribution?

[max-maurice]

@haacked #85 seems to handle wrapped elements, but doesn't fix this issue where I passed an instance of HTMLFormElement. Could you please re-open it?

[dahlbyk]

formInputUIDs being undefined suggests the form didn't get scanned ahead of validation. Can you add a logger to your ValidationService and check if you see the form in question being scanned for inputs to validate?

I almost wonder if we should just auto-scan a form if there's an attempts to validate it but it's not been scanned.

[max-maurice]

According to the logs, the form element itself didn't get scanned. The parent element surrounding the form (a Bootstrap modal) however did:

Added node <div class="modal-backdrop show">
aspnet-validation.js:1341:28

Scanning <div class="modal-backdrop show">
aspnet-validation.js:1306:20

Attribute 'class' changed from '' to 'modal-backdrop show' 
<div class="modal-backdrop show">
aspnet-validation.js:1358:28

Scanning <div class="modal-backdrop show">
aspnet-validation.js:1306:20

Added node <div class="modal show" tabindex="-1" role="dialog" aria-labelledby="activation_modal_label" style="display: block;" aria-modal="true">
aspnet-validation.js:1341:28

Scanning <div class="modal show" tabindex="-1" role="dialog" aria-labelledby="activation_modal_label" style="display: block;" aria-modal="true">
aspnet-validation.js:1306:20

Attribute 'style' changed from '' to 'display: block;' 
<div class="modal show" tabindex="-1" role="dialog" aria-labelledby="activation_modal_label" style="display: block;" aria-modal="true">
aspnet-validation.js:1358:28

Scanning <div class="modal show" tabindex="-1" role="dialog" aria-labelledby="activation_modal_label" style="display: block;" aria-modal="true">
aspnet-validation.js:1306:20

Attribute 'aria-hidden' changed from '' to '' 
<div class="modal show" tabindex="-1" role="dialog" aria-labelledby="activation_modal_label" style="display: block;" aria-modal="true">
aspnet-validation.js:1358:28

Attribute 'aria-modal' changed from '' to 'true' 
<div class="modal show" tabindex="-1" role="dialog" aria-labelledby="activation_modal_label" style="display: block;" aria-modal="true">
aspnet-validation.js:1358:28

Scanning <div class="modal show" tabindex="-1" role="dialog" aria-labelledby="activation_modal_label" style="display: block;" aria-modal="true">
aspnet-validation.js:1306:20

Attribute 'role' changed from '' to 'dialog' 
<div class="modal show" tabindex="-1" role="dialog" aria-labelledby="activation_modal_label" style="display: block;" aria-modal="true">
aspnet-validation.js:1358:28

Scanning <div class="modal show" tabindex="-1" role="dialog" aria-labelledby="activation_modal_label" style="display: block;" aria-modal="true">
aspnet-validation.js:1306:20

Attribute 'class' changed from '' to 'modal show' 
<div class="modal show" tabindex="-1" role="dialog" aria-labelledby="activation_modal_label" style="display: block;" aria-modal="true">
aspnet-validation.js:1358:28

Scanning <div class="modal show" tabindex="-1" role="dialog" aria-labelledby="activation_modal_label" style="display: block;" aria-modal="true">
aspnet-validation.js:1306:20

Added node #text "    "
aspnet-validation.js:1341:28

Added node <p>
aspnet-validation.js:1341:28

Scanning <p>
aspnet-validation.js:1306:20

Added node #text "\n    "
aspnet-validation.js:1341:28

Added node <table class="table table-striped">
aspnet-validation.js:1341:28

Scanning <table class="table table-striped">
aspnet-validation.js:1306:20

Added node #text "\n"
aspnet-validation.js:1341:28

Added node <p>
aspnet-validation.js:1341:28

Scanning <p>
aspnet-validation.js:1306:20

Removed node 
<div class="spinner-border m-auto d-flex" role="status">
aspnet-validation.js:1348:28

Removing 
<div class="spinner-border m-auto d-flex" role="status">

[max-maurice]

My form contains only hidden inputs. After adding a dummy text input, it worked.

Maybe isValid() could return true for automatically added forms without validatable inputs?

[dahlbyk]

Only hidden inputs never would have occurred to me! Returning true is the correct behavior, it's just a question of what the right implementation is. I can peek at it if @haacked doesn't get to it first.

[haacked]

All yours! But please review my other PR. 😂

[haacked]

@dahlbyk you still planning to look at this?

[dahlbyk]

I haven't had a chance yet. up-for-grabs

[dahlbyk]

Give #105 a try?

[dahlbyk]

Fix shipped in https://www.npmjs.com/package/aspnet-client-validation/v/0.9.6, please let us know if you still see an issue.