CODEWITHSUNDEEP
javascripthtmlformsvalidation
zigzag
zigzag

Reputation: 321

HTML input attribute "pattern" enforcing pattern even when blank

I have an input element that is rendered like this in my browser (Chrome, on Mac). Note the blank pattern attribute

<input aria-labelledby="Amount Given" type="text" pattern="" inputmode="" field="[object Object]" data-qa="Amount Given" placeholder="$0.00" variant="default" metadata="[object Object]" class="sc-fznzOf dIIJtr" value="" style="text-align: right;">

According to MDN:

If the pattern attribute is present but is not specified or is invalid, no regular expression is applied and this attribute is ignored completely. If the pattern attribute is valid and a non-empty value does not match the pattern, constraint validation will prevent form submission.

According to this, the pattern attribute should be ignored for my input element, as the pattern is given the empty string value. Instead, form submission is blocked by constraint validation, and I get a native html tooltip warning about pattern mismatch.

Making this even more confusing, this element is rendered by a React component that is totally functional and in use elsewhere in my organization without this hitch.

Other things to note: if I completely remove the property manually in the dev tools, submission is not blocked (meaning it's definitely this attribute doing the enforcing). And in the UI, if I leave the field totally BLANK submission is not blocked anymore (meaning I passed the pattern match constraint).

So, it seems like what is ACTUALLY happening is the blank pattern attribute is enforcing an "empty" pattern on my field (like the opposite of the required attribute). This is different than is described in the MDN docs, or any other docs about it I could find.

But, the fact that this React component renders the exact same HTML in other places without this issue, I feel like there is some other feature of the HTML form DOM constraint system that is enforcing a blank pattern, that is not mentioned in the docs I could find.

Upvotes: 2

Views: 984

Answers (1)

tklodd
tklodd

Reputation: 1079

When you (or REACT) use javascript to modify the DOM, the changes are not always evident in the inspector, even though they have taken place. I would guess that the pattern attribute is being set with javascript after the page is rendered but that you are just seeing the initial rendition of said page. Try right clicking on the element in the inspector and selecting "Use in Console". Then see what the pattern attribute is in the console. My guess is that it will be different.

Upvotes: 1

Related Questions