HTML5 form input pattern regex is not behaving as expected

Question

I am using regex101 as a baseline for correct javascript regex. Here is my pattern:

/^(?=.*[0-9])(?=.*[a-zA-Z]).{8,40}/g

I am trying to create a password regex that is between 8-40 characters, with any characters but at least one number and at least one alphabet character.

On regex101, this pattern works as expected. asdf1234 correctly is matched.

However, trying to use this pattern in html5 form input pattern does not match the same results.

fiddle

What am I doing wrong?

Wiktor Stribiżew · Accepted Answer · 2016-11-08 23:08:03Z

2

Do not use the regex literal in HTML5 pattern attribute, it only accepts a string pattern (the / symbols on both ends in your pattern are treated as literal slashes).

<form>
    <input type="text" pattern="^(?=.*[0-9])(?=.*[a-zA-Z]).{8,40}$" />
    <input type="submit" value="OK" />
</form>

Note that the ^ and $ in this pattern are not required as the regex in HTML5 pattern is anchored by default, but are OK to use (it will be easier to debug using regex101 or similar service).

answered Nov 8, 2016 at 23:08

Wiktor Stribiżew

631k41 gold badges502 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Neil S Over a year ago

wonderful! Thank you! I'm surprised this isn't documented more in top search results - They don't use slashes in examples, but also don't call it out that they are not needed.

Collectives™ on Stack Overflow

HTML5 form input pattern regex is not behaving as expected

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related