HTML5 RegEx Pattern - validate against substring

Question

I try to find a solution for this HTML5 form validation scenario:

I have an input field, wher the user needs to enter his full name like "John J. Jones"

<input id="test" name="test" type="text" 
placeholder="Please insert your full name" 
pattern="this is where I need some help please" 
required="required" 
title="Please insert your full name as per your registration form">

I would like the pattern to validate, if "somewhere" in the input field the string 'Jones' (or 'jones') has been entered. It could be in the beginning, somewhere in the middle or at the end, can be entered in all lowercase, upper and lowercase combination or upper case only ...

So valid inputs would be:

"J.J. Jones"
"j.j.jones"
"Jones, John"
"jones, john"
"John Jones III."
"j.jones III."

All is ok, as long as "jones" is somewhere in the string entered.

Thank you!

Is the other formatting required? Or can you just do input.value.indexOf('jones') > -1 ? (based on "as long as "jones" is somewhere in the string entered") — MDEV
– MDEV, Commented Oct 15, 2013 at 16:02
@SmokeyPHP : I think he's rather looking into the "pattern" HTML5 attribute of input fields... — Laurent S.
– Laurent S., Commented Oct 15, 2013 at 16:06
I was myself writing a javascript based solution when I noticed this ;-) — Laurent S.
– Laurent S., Commented Oct 15, 2013 at 16:14

rla4 · Accepted Answer · 2013-10-15 16:34:37Z

1

The HTML5 pattern is always case sensitive. You could try to do it manually. I'm not a regex expert, but I guess this should do the job, despite being kind of ugly:

pattern=".*[j|J][o|O][n|N][e|E][s|S].*"

or I guess this would work too (plus, it looks a bit better):

pattern=".*[jJ][oO][nN][eE][sS].*"

edited Oct 15, 2013 at 16:34

answered Oct 15, 2013 at 16:12

rla4

1,2461 gold badge13 silver badges25 bronze badges

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

Comments

vinniecent · Accepted Answer · 2013-10-15 16:25:52Z

1

You could do something like this:

pattern=".*((j|J)(o|O)(n|N)(e|E)(s|S))+.*"

answered Oct 15, 2013 at 16:25

vinniecent

3422 silver badges5 bronze badges

Collectives™ on Stack Overflow

HTML5 RegEx Pattern - validate against substring

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related