Using the Pattern Attribute in HTML5

Question

I have a form in HTML5 and I want to add validation elements to the name, address and phone fields. So far I have the following code:

name='name' pattern='(-.''[A-Za-z])'
name='phone' pattern='[0-9+()x-' ']'
name='address' pattern='[0-9A-Za-z][.,#/\:;''&*]'

For the name, I need it to be able to accept the -'. symbols.
For the phone, I need it to be able to accept +()0-9 x and space.
For address, I need it to be able to accept all of the characters I've put there.

I'm not sure I've done it right though, as when testing I don't get error messages.

Just a friendly reminder : Never trust the user. Never forget back-end values verification. — Seblor
– Seblor, Commented Jul 13, 2017 at 1:23
It appears you're not very familiar with regex. I highly recommend learning using a tutorial, but there's also many pre-made regexes already available online, such as ones on this site. — castletheperson
– castletheperson, Commented Jul 13, 2017 at 1:27

Marvin · Accepted Answer · 2017-07-13 01:29:53Z

3

You need to enclose the pattern in " as you are also using ' within your pattern itself.

Sample for the name field, including the correct pattern string:

<form>
<input type="text" name="name" required pattern="[-.'A-Za-z]+" /><input type="submit">
</form>

(assuming you want to allow -'. plus the characters, your requirements are not 100% clear to me)

edited Jul 13, 2017 at 1:29

answered Jul 13, 2017 at 1:23

Marvin

14.6k3 gold badges56 silver badges62 bronze badges

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

1 Comment

R.Sloshy Over a year ago

Thanks Marvin. Great help...that fixed the issues :)

Collectives™ on Stack Overflow

Using the Pattern Attribute in HTML5

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