diff --git a/core/client/app/styles/layouts/tags.css b/core/client/app/styles/layouts/tags.css
index 562028721f..1fab2cd7ac 100644
--- a/core/client/app/styles/layouts/tags.css
+++ b/core/client/app/styles/layouts/tags.css
@@ -110,6 +110,7 @@
.settings-tag .tag-description {
margin: 0;
color: color(#dfe1e3 lightness(-10%));
+ word-wrap: break-word;
font-size: 13px;
}
diff --git a/core/client/app/templates/settings/tags/settings-menu.hbs b/core/client/app/templates/settings/tags/settings-menu.hbs
index f323344b88..a12a8c000f 100644
--- a/core/client/app/templates/settings/tags/settings-menu.hbs
+++ b/core/client/app/templates/settings/tags/settings-menu.hbs
@@ -22,10 +22,12 @@
{{gh-url-preview prefix="tag" slug=activeTagSlugScratch tagName="p" classNames="description"}}
-
+ {{#gh-form-group errors=activeTag.errors hasValidated=activeTag.hasValidated property="description"}}
{{gh-textarea id="tag-description" name="description" value=activeTagDescriptionScratch focus-out="saveActiveTagDescription"}}
-
+ {{gh-error-message errors=activeTag.errors property="description"}}
+ {{gh-count-down-characters activeTagDescriptionScratch 200}}
+ {{/gh-form-group}}
{{#gh-tab tagName="li" classNames="nav-list-item"}}
diff --git a/core/client/app/validators/tag-settings.js b/core/client/app/validators/tag-settings.js
index e7a44cc499..7f99571d77 100644
--- a/core/client/app/validators/tag-settings.js
+++ b/core/client/app/validators/tag-settings.js
@@ -1,7 +1,7 @@
import BaseValidator from './base';
export default BaseValidator.create({
- properties: ['name', 'metaTitle', 'metaDescription'],
+ properties: ['name', 'description', 'metaTitle', 'metaDescription'],
name: function (model) {
var name = model.get('name');
@@ -16,6 +16,16 @@ export default BaseValidator.create({
this.invalidate();
}
},
+
+ description: function (model) {
+ var description = model.get('description');
+
+ if (!validator.isLength(description, 0, 200)) {
+ model.get('errors').add('description', 'Description cannot be longer than 200 characters');
+ this.invalidate();
+ }
+ },
+
metaTitle: function (model) {
var metaTitle = model.get('meta_title');