CODEWITHSUNDEEP
regexhtml
John Smith
John Smith

Reputation: 171

HTML Pattern - regex not working

I'm trying the pattern attribute for the first time, and I can't get it to work (my browser does support it, though).

Right now I have:

input type="text" pattern="[a-zA-Z0-9]{6}" name="formName"

The first problem is that is doesn't notify me if it's blank; the second problem is that if I do type in something, it won't accept it. I want it to accept alphanumeric characters and be exactly 6 characters is length. I tried it with forward slashes and a few other variations.

Upvotes: 15

Views: 86848

Answers (5)

Chathura
Chathura

Reputation: 1

Inputs need to be inside "form" with "onSubmit" prop

Upvotes: -3

c4po
c4po

Reputation: 21

You simply need to add the required attribute to your tag, which will notify the user if they attempt to send the form with that very field blank.

<input type="text" pattern="[a-zA-z0-9]{6}" name="formName" required>

Upvotes: 1

gkalpak
gkalpak

Reputation: 48211

As Duikboot already pointed out, the right way to do it is:

<input type="text" name="formField" pattern="[a-zA-Z0-9]{6}" required>

The required attribute causes the validation to fail, when the field is empty.
The pattern attribute defines the regex to test against, when the field is not empty.
(Your initial pattern seems to work fine.)

More info can be found here.
This is simple enough so as not to require a demo, but nonetheless you can find one here.

Upvotes: 13

Golda
Golda

Reputation: 3881

Try this code its working perfectly

<html>
<body>    
<form action="demo_form.asp">
  Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
  <input type="submit">
</form>    
</body>
</html>

Enter invalid country code and click submit button. Then You can get a message (title="Three letter country code")

Upvotes: -1

barbuslex
barbuslex

Reputation: 340

Works for me here : http://jsfiddle.net/barbuslex/nR6yg/

<form>
    <input type="text" pattern="[a-zA-Z0-9]{6}" name="formName" />
    <input type="submit" value="OK" />
</form>

I use Google Chrome

Upvotes: 2

Related Questions