diff --git a/tildes/scss/themes/_theme_base.scss b/tildes/scss/themes/_theme_base.scss index c50a4f3..729669f 100644 --- a/tildes/scss/themes/_theme_base.scss +++ b/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 { diff --git a/tildes/static/js/behaviors/autocomplete-input.js b/tildes/static/js/behaviors/autocomplete-input.js index 340e349..b23d4be 100644 --- a/tildes/static/js/behaviors/autocomplete-input.js +++ b/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 + ","); diff --git a/tildes/tildes/templates/macros/forms.jinja2 b/tildes/tildes/templates/macros/forms.jinja2 index 6d323ce..a675476 100644 --- a/tildes/tildes/templates/macros/forms.jinja2 +++ b/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 %}