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/

Answer 1

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.

Answer 2

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>