According to (docs/form-handling/#ajax-form-submissions) you add a hidden input element. A valid HTMLInputElement has no closing tag and is void, i.e. it’s never closed. However, for some reason inside my Netlify App using Netlify Forms when inserted the hidden HTMLInputElement looks like this:
<input type='hidden' name='form-name' value='contact-form' />
I’ve marked the above code snippet as XHTML, because this ^ is not valid HTML:
In HTML, the <input> tag has no end tag. In XHTML, the <input> tag must be properly closed, like this <input />.
It’s causing an unexplicable error in Nuxt (Vue):
DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
Because it’s invalid Chrome tries to guess what’s happening and does this:
It nests a text node and another HTMLInputElement inside of an HTMLInputElement, but since an Input Element is void it cannot have anything inside it and Vue does not know what’s going on at this point!
It’s very frustrating, because everything works fine on my development machine and the reason something goes wrong is something I cannot control. It’s been a major source of frustration in my life for the last few hours
(this is a copy of netlify-cms issue #2396 I have misplaced on the Netlify-CMS team, I’ve also sent a support ticket )