HTML input element password pattern with alphabet and number range

Question

I know this may be very simple but I couldn't find anything relevant. I am using the HTML element for accepting the password from the user.

There is a condition for the password to be accepted

1. It should only contain letters between a to h (0 times or more)

2. It should only contain numbers between 1 to 8 (0 times or more)

Following the above two conditions the user can come up with any password combination. For example: abc123, 6ad27, hefb etc etc which should be accepted by the input element.

But it should not accept patterns like z00911, ksoql234 etc.

What should be the value for pattern attribute in the following code snippet for checking the above two conditions?

<input type="password" pattern="WHAT-SHOULD-I-PUT-HERE">

I hope someone might help. Thank you

Answer 1

 <form action="/blablabla"> <input type="password" pattern="[a-h1-8]+" required="required" title="Wrong password"> <input type="submit"> </form> 

In regular expression [ah] means range of character, you can define multiple ranges in square brackets: [a-h1-8] . If you want to allow repetitions of pattern you add * (0 or more repetitions) or + (1 or more repetition) after pattern. Your pattern for single letter is [a-h1-8] so for password containing at least on character full pattern is [a-h1-8]+ . You can read more here .

I have also added required attribute to enforce filling password field, without that attribute user could simply leave password blank.

Answer 2

You can handle this problem easily with javascript functions such as onChange event on your input tag. Every onChange event you can check the last added character or letter whether meets your conditions.