HTML5 Pattern (regex) for symbols not working

Question

I cannot believe it came down to this, but honestly I cannot figure out why browsers do not want to use the symbol pattern I define for password validation.

Take the following example:

<input type="password" id="pwd" name="pwd" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters">

Can be reproduced there (taken from here): https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_pattern3

It works accordingly. The moment I try to add symbols requirement as well:

  <input type="password" id="pwd" name="pwd" pattern="(?=.*\d)(?=.*[a-z])(?=.*[~!@#$%^&*+-_/.,{}[\]();:|?<>=]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters">

Game over. It won't require a symbol as well, you can submit without symbols and even without numbers.

I have tried all sorts of escaping, it just won't work further than the + sign.

My desired allowance of symbols would be (note, intentionally un-escaped for reading):

~!@#$%^&*+-_/.,\{}[]();:|?<>="'`

I believe the above should cover all symbols to allow users to use strong passwords (usually from password generators).

So the final result for validation would be:

• At least 8 characters
• At least one uppercase
• At least one lowercase
• At least one symbol (special character)

Can someone shed some light on this please? Is there a specific set of symbols allowed in HTML inputs or I am just not escaping them right?

Many thanks

Answer 1

I have tested each character individually until I have found the culprit. It seems a bit different than escaping JS based pattern/regex.

Essentially you need to escape the following characters only:

- \ [ ]

The character " does not work.

The final working pattern is:

pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[~!@#$%^&*+\-_/.,\\{}\[\]();:|?<>='`]).{8,}"

With the above you can allow the following symbols:

~ ! @ # $ % ^ & * + - / . , \ { } [ ] ( ) ; : | ? < > = ' `

Answer 2

you should put your regex between //i like this:

<input type="password" id="pwd" name="pwd" pattern="/~!@#$%^&*+-_/.,\{}[]();:|?<>="'`/i" ....../>

Answer 3

Try this please.

 <input type="text" pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$?%*#?&])[A-Za-z\d@$,%*#?&]{8,}$">