Tags: Add client-side check for invalid characters

tildes/scss/themes/_theme_base.scss

@@ -230,6 +230,23 @@
         color: $active-color;
       }
     }
+
+    &.error {
+      background-color: map-get($theme, "error");
+
+      $error-color: #fff;
+      $is-error-bg-light: perceived-brightness(map-get($theme, "error")) > 50;
+
+      @if ($is-error-bg-light) {
+        $error-color: #000;
+      }
+
+      color: $error-color;
+
+      .btn {
+        color: $error-color;
+      }
+    }
   }
 
   .comment-branch-counter {

tildes/static/js/behaviors/autocomplete-input.js

@@ -35,6 +35,14 @@ $.onmount("[data-js-autocomplete-input]", function() {
                     $chip.html(tag);
                     $chip.append(clearIcon);
 
+                    if (!tag.match(/^[\w .]+$/)) {
+                        $chip.addClass("error");
+                        $chip.attr(
+                            "title",
+                            "Tags may only contain letters, numbers, and spaces."
+                        );
+                    }
+
                     $chips.append($chip);
 
                     $tagsHiddenInput.val($tagsHiddenInput.val() + tag + ",");

tildes/tildes/templates/macros/forms.jinja2

@@ -49,6 +49,7 @@
         autocapitalize="none"
         spellcheck="false"
         name="tags"
+        pattern="[\w .,]*"
         placeholder='Tags (like "music, soundtrack, full album")'
         data-js-autocomplete-input='{{ autocomplete_options|tojson if autocomplete_options }}'
         {% if value %} value="{{ value }}"{% endif %}