HTML pattern does't work even with correct regular expression

Question

Regular expression: ((?=.*\d)(?=.*[A-Z]))

Input string: qwer1Q

The input string above pass the validation if you check it in regex101

However, if you include the regex in a html pattern attribute and try to validate the same string again, it shall not pass:

<form>
  <div>
    <input type="text" placeholder="Password" 
      pattern="((?=.*\d)(?=.*[A-Z]))">
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

Answer 1

You need to make sure the pattern matches (and consumes) the entire string because the HTML5 pattern regex is anchored by default.

<form>
  <div>
    <input type="text" placeholder="Password" 
      pattern="(?=.*\d)(?=.*[A-Z]).*">
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

The (?=.*\d)(?=.*[A-Z]).* pattern will be turned into ^(?:(?=.*\d)(?=.*[A-Z]).*)$ and it will match:

• ^ - start of string
• (?: - start of a non-capturing group:
  • (?=.*\d) - a positive lookahead check to make sure there is at least 1 digit
  • (?=.*[A-Z]) - a positive lookahead check to make sure there is at least 1 uppercase letter
  • .* - any 0+ chars, greedily, up to the end of string
• ) - end of the non-capturing group
• $ - end of string.