HTML Form field validation is bypassed when element is created with .innerHTML [closed]

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.

This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.

Closed 2 years ago.

Improve this question

When a form field that has standard HTML validation constraints placed on it (pattern & required in this case) gets inserted into the DOM via the .innerHTML property, the field does not validate. I am aware of the difference between creating an element with .innerHTML and document.createElement() with regards to event registration, but have not encountered this side-effect before.

In my particular situation, there is a very large amount of HTML that must be inserted into the DOM and creating all of it via document.createElement(), then setting all of the node properties and using .appendChild() to establish the proper heirarchy is not desirable.

Why is this and, if it is possible, how can it be overcome (no jQuery answers please)?

NOTE: I am aware of HTML <template>, but since there is no support for it in any version of IE, it won't work for me.

In the snippet below, the first field will work as it should, but the second one demonstrates what I'm talking about. It won't validate if you manually enter data (5 digits in this case) or if you press the button to have valid data be dynamically inserted.

document.querySelector("div").innerHTML = `<input type="text" id="broken" name="zip" pattern="\d{5}" required placeholder="I don't.">`;

document.querySelector("input[type='button']").addEventListener("click", function(){
  document.getElementById("broken").value = "12345";  // 12345 or "12345" - doesn't matter
});

:required { background:#f99; }
:valid    { background:green; }
input[type=text] { width:250px; }

<input type="text" id="zip2" name="zip2" pattern="\d{5}" required placeholder="I work as I should (5 digits please).">
<div></div>
<input type="button" value="Populate">

Do not create browser controls with innerHTML - they are not document elements, and they are not exactly pure HTML, they are controls. Controls may get created and render on the document, but sometimes the will fail to get initialized or at least their browser automation may not trigger. innerHTML is perfect for pure HTML elements, for anything else, use DOM. — Bekim Bacaj
– Bekim Bacaj, Commented Mar 9, 2018 at 19:54
@BekimBacaj I appreciate your input (no pun intended), but your description is not exactly correct. There is no such thing as a "control" in the world of HTML. .innerHTML does, in fact, create DOM elements and they are "pure" html. These elements are accessible as nodes and can be interacted with as normal. The only issues with .innerHTML are event registration and performance slowdowns due to re-paints and re-flows. — Scott Marcus
– Scott Marcus, Commented Mar 9, 2018 at 19:56
@BekimBacaj When you use .innerHTML you are simply asking the user-agent to parse a string for HTML content and then deal with that HTML as it normally would. This is no different than what the UA does when the page is first loaded with the exception that the newly parsed HTML must be "injected" into the existing DOM, so there are timing issues that come up (hence the event registration issues) as well as rendering issues. — Scott Marcus
– Scott Marcus, Commented Mar 9, 2018 at 19:59
@BekimBacaj Having said all of that, I agree that using the DOM API to create and update the DOM is generally the better approach, as it is cleaner and usually results in more scalable code. — Scott Marcus
– Scott Marcus, Commented Mar 9, 2018 at 20:01
@BekimBacaj I encourage you to look at my comments in the chat. I've been doing this for a very long time and I am quite confident that you are confusing what happens between the OS and the UA with what happens in the UA's DOM Parser and JS engine. You are also very incorrect about the results of .innerHTML and how the DOM gets built and updated. — Scott Marcus
– Scott Marcus, Commented Mar 9, 2018 at 20:29

Ele · Accepted Answer · 2018-03-09 19:36:57Z

3

Missing backslash on your regexp:

"\\d{5}"
 ^

Look how the backslash disappears:

console.log(`<input type="text" id="broken" name="zip" pattern="\d{5}" required placeholder="I don't.">`)

Now everything is working as expected.

document.querySelector("div").innerHTML = `<input type="text" id="broken" name="zip" pattern="\\d{5}" required placeholder="I don't.">`;   

document.querySelector("input[type='button']").addEventListener("click", function(){
  document.getElementById("broken").value = "12345";  // 12345 or "12345" - doesn't matter
});

:required { background:#f99; }
:valid    { background:green; }
input[type=text] { width:250px; }

<input type="text" id="zip2" name="zip2" pattern="\d{5}" required placeholder="I work as I should (5 digits please).">
<div></div>
<input type="button" value="Populate">

answered Mar 9, 2018 at 19:36

Ele

33.8k7 gold badges43 silver badges80 bronze badges

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

Collectives™ on Stack Overflow

HTML Form field validation is bypassed when element is created with .innerHTML [closed]

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related