HTML 5 Input regex pattern not working

Question

For some reason I'm having problems making this work with HTML5 form validation pattern attribute. I'm trying to match this condition /[!?^$\\\/{}]/g. I have tried escaping \ removing the \ with the global attribute, removing the [], almost everything. So there's always a first time to post a question on stackoverflow.

In a nutshell the user shouldn't input the following \/${}

<form action="#">
    <input type="text" required pattern="/[!?^$\\\/{}]/g">
    <button type="submit">Submit</button>
</form>

4.20 - 4.21 New export -> Should be valid

4/20 - 2/21 $New {export} -> Should be invalid

Here's the fiddle: http://jsfiddle.net/TV28A/

You mean as an example? If the user does 4/20 - 4/21 $Date That should be rejected. It should accept all string characters except \/${} @GregBurghardt — Arnaldo Capo
– Arnaldo Capo, Commented May 2, 2014 at 16:59
can you provide an example of a string that you want to to be considered valid and one that you don't? — JasonWilczak
– JasonWilczak, Commented May 2, 2014 at 17:05

Caio Oliveira · Accepted Answer · 2014-05-02 17:45:55Z

2

I have tried all the answers above and any worked (don't know if I am testing wrong). But Just in case:

I think if you want to block only the \/${} characters, this should be the right regex [^\/\\${}]*

so the code would be something like:

<form action="#">
    <input type="text" required pattern="[^\/\\${}]*">
    <button type="submit">Submit</button>
</form>

Putting the ^ character as the first one into the brackets, it negate the sentence, so [^\/\\${}]* means string which do NOT have / \ $ { } of any size.

EDIT:

Sharing the jsFiddle as requested in the comments.

edited May 2, 2014 at 17:45

answered May 2, 2014 at 17:17

Caio Oliveira

1,26313 silver badges22 bronze badges

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

2 Comments

jfriend00 Over a year ago

Can you show a jsFiddle where this works. I can't get it to work.

Caio Oliveira Over a year ago

posted jsFiddle as requested @jfriend00

wvandaal · Accepted Answer · 2014-05-02 17:11:52Z

0

There is no need for you to enclose your RegEx in / when using the pattern attribute. Furthermore, the g flag is also unnecessary due to the fact that the expression must match the entire input field, rather than just a section of it.

This should suffice for your purposes:

<form action="#">
  <input type="text" required pattern="[!?^$\\\/{}]">
  <button type="submit">Submit</button>
</form>

answered May 2, 2014 at 17:11

wvandaal

4,2952 gold badges18 silver badges27 bronze badges

4 Comments

Arnaldo Capo Over a year ago

Did you guys try this with the jsfiddle link? Doesn't seem to be working. cc: @jfriend00

JasonWilczak Over a year ago

this doesn't validate OP's strings as desired FIDDLE

Arnaldo Capo Over a year ago

@JasonWilczak I must be going crazy but your Fiddle is not working for me.

JasonWilczak Over a year ago

Yeah, my point was to show that the answer wasn't working based on the Fiddle i provided, sorry about that :)

Collectives™ on Stack Overflow

HTML 5 Input regex pattern not working

2 Answers 2

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related