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

user_9352713 0
Viewed 6075

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.

css html javascript
3 Answers

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>
user_57500160

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,}">
user_44745310

You're actually very close. The biggest mistakes are:

You should escape some of the special characters inside the character group and you should have hyphen as the last character (otherwise it's a range).

Here is the RegExp you request:

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

Update: I forgot to html encode the pattern for use directly in html. Now it should work.

user_57416430
Related