HTML validation rules with regex

Question

I need to validate a code format:

Need to be 10 characters
A mix of letters and numbers
At least 1 letter from a-f

and I write:

<input maxlength="200" type="text" name="code" id="code" required="required" class="form-control input-lg"  pattern="[a-fA-F0-9]{10}" title="Wrong Code" placeholder="Security Code" />

so my pattern is pattern="[a-fA-F0-9]{10}" but HOW I can add rules that at least 1 letter from a-f is required?

Required in the whole string or the beginning of the string? — Starfish, Jul 11 '18 at 09:43

The fourth bird · Accepted Answer · 2018-07-11T09:58:20.863

2

You could use a positive lookahead (?= to assert that what follows contains at least 1 occurance of [a-fA-F]

Updated version suggested by Wiktor Stribiżew

(?=[0-9]*[a-fA-F])[a-fA-F0-9]{10}

Explanation about the positive lookahead (?=[0-9]*[a-fA-F])

(?: Non capturing group
- [0-9]* Match zero or more times a digit
- [a-fA-F] Match a-f in lower or uppercase
) Close non capturing group

<form>
  <input maxlength="200" type="text" name="code" id="code" required="required" class="form-control input-lg" pattern="(?=[0-9]*[a-fA-F])[a-fA-F0-9]{10}" title="Wrong Code" placeholder="Security Code" />
  <input type="submit" name="submit">
</form>

edited Jul 11 '18 at 09:58

answered Jul 11 '18 at 09:45

The fourth bird

154,723
16
55
70

`(?=[0-9]*[a-fA-F])[a-fA-F0-9]{10}` will be faster. – Wiktor Stribiżew Jul 11 '18 at 09:47
@WiktorStribiżew You are correct! I have updated my answer with your faster regex. – The fourth bird Jul 11 '18 at 09:52

score 2 · Answer 2 · answered Jul 11 '18 at 09:45

2

Regex pattern to match at least 1 number and 1 character in a string

/^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$/

Look at the regex in this thread, it should fit your needs. You need to replace your pattern with it.

answered Jul 11 '18 at 09:45

Lumpenstein

1,250
1
10
27

score 0 · Answer 3 · answered Jul 11 '18 at 09:50

try this one

<form action="/action_page.php">
  <input type="text" name="code" id="code" required="required" class="form-control input-lg" pattern="(?=[a-fA-F0-9]*[a-fA-F])[a-fA-F0-9]{10}" title="Wrong Code" placeholder="Security Code" />
  <input type="submit">
</form>

<b>
<pre>
1)Need to be 10 characters
2)A mix of letters and numbers
3)At least 1 letter from a-f
</pre></b>

score 0 · Answer 4 · answered Jul 11 '18 at 10:48

There is already an accepted answer, but that one is not complete.

The requirements state that there needs to be "A mix of letters and numbers" and "At least 1 letter from a-f". That would mean that these entries below would match as well:

8adfl9542a
m0ammmmmmm
11111a1111

They do not match in the accepted answer. I created my own regex which shows that the above entries match as well:

(?=.*[a-fA-F]+)(?=.*[0-9]+)[a-zA-Z0-9]{10}

Explanation:

(?=.*[a-fA-F]+) Match at least one character from a-f (upper- or lowercase)

(?=.*[0-9]+) Match at least one number

[a-zA-Z0-9]{10} Total string must be 10 characters long and must consist of characters from a-z (upper- or lowercase) or numbers

HTML validation rules with regex

4 Answers4