Fix pattern for needle tag

Developer console showed me this error:

    Pattern attribute value ^[A-Za-z0-9-_]+$ is not a valid regular expression:
    Uncaught SyntaxError: Invalid regular expression: /^[A-Za-z0-9-_]+$/v:
    Invalid character class

Apparently dashes have to be escaped. Moving it to the end of the character
class (this would have fixed it for a perl regex) did not help.

t/ui/12-needle-edit.t

@@ -334,6 +334,18 @@ my $needlename = 'test-newneedle';
 my $xoffset = my $yoffset = 200;
 
 subtest 'Create new needle' => sub {
+    subtest 'invalid needle tag is rejected' => sub {
+        $elem = $driver->find_element_by_id('newtag');
+        $elem->send_keys('123');
+        my $button = $driver->find_element_by_id('tag_add_button');
+        ok !$button->is_enabled, 'tag too short, Add button not enabled';
+        $elem->send_keys('4');
+        ok $button->is_enabled, 'tag valid, Add button enabled';
+        $elem->send_keys('!');
+        ok !$button->is_enabled, 'tag invalid, Add button not enabled';
+        $elem->clear;
+    };
+
     add_needle_tag();
 
     # check needle name input

templates/webapi/step/edit.html.ep

@@ -191,7 +191,7 @@
                             <div class="mb-3 row">
                                 <div class="col-sm-10">
                                     <input type="text" class="form-control" id="newtag" placeholder="Add new tags here"
-                                            pattern="^[A-Za-z0-9-_]+$" minLength=4 title="[A-Za-z0-9-_], at least 4 characters">
+                                            pattern="^[A-Za-z0-9\-_]+$" minLength=4 title="[A-Za-z0-9-_], at least 4 characters">
                                 </div>
                                 <div class="col-sm-2">
                                     <button type="button" class="btn btn-secondary form-control" id="tag_add_button" disabled>Add</button>