HTML Pattern Does't Work Even With Correct Regular Expression

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 pa

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