How to make input password require at least one special character (bracket included)

Question

I was wondering how to add in the special character part with brackets like {} [] () and other stuff like " ' - to the unique character I tried below, but for some reason when I add in another of those characters it stops working.

<-- works but does not have any brackets or quotes for special character-->
<form acton = "#">      
    <input type="password" id="newPass" required
      pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*?[0-9])(?=.*?[!@#$%^&*+`~=?\|<>/]).{8,}"

    <button>submit</button>

</form>

The part above works but does not have quotes or more special character

Code below has bracket but does not work

<-- does not work (if you do not enter special character user will be able to submit but it does not have any brackets -->

<form acton = "#">      
    <input type="password" id="newPass" required
      pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*?[0-9])(?=.*?[~`!@#$%^&*()-_=+[]{};:'.,"\|/?><]).{8,}"

    <button>submit</button>

</form>

also this did not work (from an answer)

<form acton = "#">      
    <input type="password" id="pass" required
      pattern="(?=.*\d)(?=.*[a-z])(?=.*?[0-9])(?=.*?[~`!@#$%\^&*()\-_=+\[\]{};:\'.,\"\\|/?\>\<]).{4,}">

    <button>submit</button>

</form>

I am looking for an answer that makes the bottom part (the one with brackets and all of those special character I included) works.

Answer 1

Since it is regex, all of the characters inside [.....] are allowed, so you should add brackets to there. You can do this with the usage of escape character (because brackets has a role in regex). So just add \] and \[ to the characters allowed inside [.....].

try:

<input type="password" name="pw" pattern="(?=.*?[#?!@$%^&*-\]\[])"

By the way.. I would recommend working with regex cheat sheet, it will help you a lot in validation tasks.

As for your EDIT:

The " and ' needed to be escaped. While \" \' won't work you can use \x27 and \x22 instead, these are the hexadecimal representation of " and ' in the ascii table.

try:

<form acton = "#">      
        <input type="password" id="pass"  required pattern = "(?=.*\d)(?=.* 
     [a-z])(?=.*?[0-9])(?=.*?[~`!@#$%\^&*()\-_=+[\]{};:\x27.,\x22\\|/?><]).{4,}">

        <button>submit</button>

</form>

Answer 2

You should escape regex (e.g. \]) characters if they need to be matched during pattern search. Also, refer to the existing answer:

Braces and brackets in passwords

The following works for me, hopefully it should work at your end: (I merely added escaped characters)

   <input type="password" id="newPass" required
      pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*?[0-9])(?=.*?[!@#$%^&*+`~'=?\|\]\[\(\)\-<>/]).{8,}">