html input regex pattern not working

Question

I have the following code:

<body>
    <form action="" method="post">
        <div>
            <label>First Name: <input type="text" name="firstname" value=" " pattern="[a-zA-Z ]+"></input> </label>
        </div>
        <div>
            <label>Last Name: <input type="text" name="lastname" value="" pattern="[a-zA-Z ]+"> </input> </label>
        </div>
        <div>
            <label>Voucher: <input type="text" name="voucher" value="" pattern="^[0-9]{5}+[-]+[0-9]{5}+[-]+[A-Z]{2}*"></input> </label>
        </div>
        <input type="submit" value="Submit"></input>
    </form>
</body>

The above code is my code, first name and last name are all working, the problem is the voucher input does not check the pattern I wanted, it should look like "12345-67890-AB".

You don't need the + because you are already saying you need 5 characters — PeeHaa
– PeeHaa, Commented May 27, 2015 at 10:25
you don't need ^ at the beginning of the regex (nor $ at the end). the pattern attribute of HTML forms implies that — Wolfgang Kluge
– Wolfgang Kluge, Commented May 27, 2015 at 10:58

Wiktor Stribiżew · Accepted Answer · 2015-05-27 12:38:31Z

3

Remove the +s and final * and add a $ at the end:

^[0-9]{5}[-][0-9]{5}[-][A-Z]{2}$

Or since the pattern attribute does not require anchoring, you can also use

[0-9]{5}[-][0-9]{5}[-][A-Z]{2}

See demo

Explanation:

^ - Beginning of a string (not necessary since the pattern string is anchored)
[0-9]{5} - Exactly 5 digits
[-] - Exactly 1 hyphen
[0-9]{5} - Exactly 5 digits
[-] - Exactly 1 hyphen
[A-Z]{2} - Exactly 2 uppercase English letters.
$ - End of string (again, can be omitted since the pattern is anchored).

edited May 27, 2015 at 12:38

answered May 27, 2015 at 10:25

Wiktor Stribiżew

631k41 gold badges502 silver badges632 bronze badges

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

2 Comments

Wiktor Stribiżew Over a year ago

@iouhammi: This regex is very generic, it will work for JavaScript and most other flavors.

hohoho Over a year ago

Thank you! this one works as well ! thanks for the explanation too !

George · Accepted Answer · 2015-05-27 10:25:53Z

2

Try this instead

^[0-9]{5}[-]+[0-9]{5}[-]+[A-Z]{2}

http://regexr.com/3b338

answered May 27, 2015 at 10:25

George

6,7592 gold badges31 silver badges36 bronze badges

Collectives™ on Stack Overflow

html input regex pattern not working

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related