diff --git a/app/javascript/article-form/components/TagsField.jsx b/app/javascript/article-form/components/TagsField.jsx
index ed00f5322..66ae8a7bb 100644
--- a/app/javascript/article-form/components/TagsField.jsx
+++ b/app/javascript/article-form/components/TagsField.jsx
@@ -2,7 +2,11 @@ import { h } from 'preact';
import PropTypes from 'prop-types';
import Tags from '../../shared/components/tags';
-export const TagsField = ({ defaultValue, onInput, switchHelpContext }) => {
+export const DEFAULT_TAG_FORMAT = '[0-9A-Za-z, ]+';
+
+export const TagsField = ({ defaultValue, onInput, switchHelpContext, tagFormat = DEFAULT_TAG_FORMAT }) => {
+ const TAG_FORMAT = '[0-9A-Za-z, ]+';
+
return (
{
onFocus={switchHelpContext}
classPrefix="crayons-article-form"
fieldClassName="crayons-textfield crayons-textfield--ghost ff-accent"
+ pattern={TAG_FORMAT}
/>
);
diff --git a/app/javascript/listings/listingForm.jsx b/app/javascript/listings/listingForm.jsx
index 56f1a42d4..f6899855e 100644
--- a/app/javascript/listings/listingForm.jsx
+++ b/app/javascript/listings/listingForm.jsx
@@ -61,6 +61,8 @@ export default class ListingForm extends Component {
expireDate,
} = this.state;
+ const TAG_FORMAT = '[0-9A-Za-z, ]+';
+
const selectOrg =
organizations && organizations.length > 0 ? (
@@ -100,6 +102,7 @@ export default class ListingForm extends Component {
maxTags={8}
autocomplete="off"
listing
+ pattern={TAG_FORMAT}
/>
(
@@ -449,7 +450,7 @@ class Tags extends Component {
onKeyDown={this.handleKeyDown}
onBlur={this.handleFocusChange}
onFocus={onFocus}
- pattern={`${LETTERS_NUMBERS}`}
+ pattern={pattern}
/>
{searchResultsHTML}