CODEWITHSUNDEEP
regexhtml
Bavi Gurunath
Bavi Gurunath

Reputation: 83

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

Upvotes: 4

Views: 2952

Answers (1)

Wiktor Stribiżew
Wiktor Stribiżew

Reputation: 626689

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.

Upvotes: 2

Related Questions