HTML5 pattern - dont allow the following characters

Question

I want to block the following characters:

( 
) 
/ 
> 
< 
] 
[ 
\ 
" 
, 
; 
| 

What is wrong with my pattern?

pattern="[^()/<>[]\,'|\x22]+"

Answer 1

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).

Answer 2

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>