Cannot read properties of undefined (reading 'filter') when using v.isValid(form)

[rasoulia]

1. when i using v.isValid(form) i get this error:
   Cannot read properties of undefined (reading 'filter') at let invalidFormInputUIDs = formInputUIDs.filter(uid => this.summary[uid]);
2. what should happen when i use v.validateForm(form)?

[dahlbyk]

1. when i using v.isValid(form) i get this error

That undefined means you're trying to validate a form that we don't know about yet. That could mean one of a few things:

1. You didn't call v.bootstrap()
2. The form didn't exist when you called v.bootstrap()
3. You called v.bootstrap({ root }) with a root that didn't contain the form

If the form is created after v.bootstrap() you can either call v.scan(form) manually or use v.bootstrap({ watch: true }) to auto-scan for new forms.

2. what should happen when i use v.validateForm(form)?

This triggers validation of all known form inputs.

1. Check all inputs for all applicable validation rules
2. Show per-input messages in matching data-valmsg-for elements, as generated by Html.ValidationMessage()/Html.ValidationMessageFor() or <span asp-validation-for="..." />.
3. Populate the validation summary in data-valmsg-summary elements, as generated by Html.ValidationSummary() or <div asp-validation-summary="..." />.

[rasoulia]

1. Yes it's created after v.bootstrap so i enable watch to scan that.
   I use v.scan(form) to but still get same error.
2. Before i call isValid i call validateForm(form). And nothing happen it's not show anything.
   This library work very well in normal situation but when i want to check validation manually it's not work.

Update: even not work in normal way in this situation (when form created after calling v.bootstrap). It's should validate form before submit but not work and submit form anyway.

Update 2: when i get PartialView from server and then add it for my page there is no validation info but if call
<partial name="_myPartial" model="myModel"
Directly it's create all validation message and work in normal way.

I find the problem but don't know how to fix it.

Solution: i find the problem. I don't know why but my when i use myDiv.setHTML(myFormCode) it's remove all validation stuff but when use myDiv.innerHTML = myFormCode it's work fine.
How to fix that to work with setHTML method because it's safe way to add html code to DOM

[dahlbyk]

How to fix that to work with setHTML method because it's safe way to add html code to DOM

You'd have to inspect the DOM to see if the default setHTML sanitizer is removing the data- attributes on which validation depends. You might be able to create a custom Sanitizer that doesn't remove important attributes.

However, it feels safe to me to use innerHTML with results from a server that you control. If that partial is rendering user-provided content then I'd suggest sanitizing server-side rather than via setHTML.

[rasoulia]

Ok thanks. Yes that data come from my server that i control it. I will use innerHtml thanks for hardworking.