Menu
I want to block the following characters:
(
)
/
>
<
]
[
\
"
,
;
|
What is wrong with my pattern?
pattern="[^()/<>[]\,'|\x22]+"
697
Definition and Usage The pattern attribute specifies a regular expression that the <input> element's value is checked against on form submission. Note: The pattern attribute works with the following input types: text, date, search, url, tel, email, and password. Tip: Use the global title attribute to describe the pattern to help the user.
Any time you can use a specific feature of HTML, instead of resorting to building regular expressions, you should use it. HTML5 introduced a number of new form validation features, and pattern is just one of them.
When a control has a pattern attribute, the title attribute, if used, must describe the pattern. Relying on the title attribute for the visual display of text content is generally discouraged as many user agents do not expose the attribute in an accessible manner.
The pattern attribute specifies a regular expression the form control's value should match. If a non-null value doesn't conform to the constraints set by the pattern value, the ValidityState object's read-only patternMismatch property will be true. The pattern attribute is an attribute of the text, tel, email, url, password, and search input types.
What is wrong with my pattern?
It contains a negated character class where you failed to escape a ] symbol. Inside a character class, it *must be escaped in JS, outside of a character class, you do not have to escape it. Thus, your "[^()/<>[]\,'|\x22]+" pattern actually means: match one and only one! character other than ()/<>[ (with the [^()/<>[] part) followed with a *sequence of ,', -OR- (as | is an alternation operator if not escaped outside of a character class) a double quote (matched with \x22) followed with one or more literal ] symbols (as ] matches a literal ] outside of a character class, and + is a quantifier set to it.
You actually need
pattern="[^()/><\][\\\x22,;|]+"
<form action="#" method="post">
<input name="name1" pattern="[^()/><\][\\\x22,;|]+" placeholder="New value" title="No special characters!">
<input class="submit" value="Submit!" type="submit" name="name2">
</form>Inside a character class, besides ], you need to escape the \ symbol. And a - if it stands between two literal symbols, but you have no hyphens here.
Note: HTML5 pattern attribute value is anchored by default, i.e. the whole pattern is wrpapped into ^(?: and )$. You do not have to put ^ and $ between the pattern.
The regular expression language used for this attribute is the same as that used in JavaScript, except that the pattern attribute is matched against the entire value, not just any subset (somewhat as if it implied a
^(?:at the start of the pattern and a)$at the end).
89
you pattern contains a ], you should escape it using a \, other characters also need to be escaped, like the \ when not used in the context of escaping another value:
<form><input pattern="[^()/<>[\]\\,'|\x22]+"><input type=submit value=test></form>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
