2

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.

Improve this question
2
  • Does this also happens with pattern (instead of pattern="")? Commented Jun 23, 2020 at 18:05
  • 1
    Actually just pattern is how it appears in dev tools, but when I copied it from there, and pasted here it came out like this pattern="". I understood those things two syntaxes to represent the same thing to the browser. Commented Jun 23, 2020 at 18:17

1 Answer 1

Reset to default
1

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.

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

3 Comments

Thanks for the response. I do not see the option "Use in console" when I right click the input element in the inspector. I tried hovering and then printing it in the console with $0, and i get the exact same stuff as before
In Firefox, it is "Use in Console". In Chrome, the equivalent is "Store as Global Variable". It will probably store it as temp1. Then you execute this command in the console to see what the attribute value is: temp1.getAttribute("pattern")
Ah ok. That does the same thing as accessing with $0. No change. ``` <input aria-labelledby="Amount Given" type="text" pattern="" inputmode="" field="[object Object]" data-qa="Amount Given" themevalues="[object Object]" placeholder="$0.00" variant="default" metadata="[object Object]" class="sc-fznzOf dIIJtr" value="" style="text-align: right;"> ```

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.