0

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/

Arnaldo Capo
  • 178
  • 1
  • 10

2 Answers2

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.

Caio Oliveira
  • 1,243
  • 13
  • 22
1

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>
wvandaal
  • 4,265
  • 2
  • 16
  • 27