diff --git a/app/code/Magento/Catalog/i18n/en_US.csv b/app/code/Magento/Catalog/i18n/en_US.csv
index 8c412dace45354da7b6056d396c7168156f2d446..2ad2194b36466b0112afc78880ff91249a7ca6af 100644
--- a/app/code/Magento/Catalog/i18n/en_US.csv
+++ b/app/code/Magento/Catalog/i18n/en_US.csv
@@ -701,6 +701,7 @@ Image,Image
"Allowed file types: jpeg, gif, png.","Allowed file types: jpeg, gif, png."
"Image Opacity","Image Opacity"
"Example format: 200x300.","Example format: 200x300."
+"This value does not follow the specified format (for example, 200X300).","This value does not follow the specified format (for example, 200X300)."
"Image Position","Image Position"
Small,Small
"Attribute Label","Attribute Label"
diff --git a/app/code/Magento/Catalog/view/adminhtml/ui_component/design_config_form.xml b/app/code/Magento/Catalog/view/adminhtml/ui_component/design_config_form.xml
index dc8ced173bc544b9b1aa24324b1294479374805d..9852ad74121c8c30f852600783a4fb91ab84ce61 100644
--- a/app/code/Magento/Catalog/view/adminhtml/ui_component/design_config_form.xml
+++ b/app/code/Magento/Catalog/view/adminhtml/ui_component/design_config_form.xml
@@ -55,12 +55,13 @@
<field name="watermark_image_size">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
+ <item name="component" xsi:type="string">Magento_Catalog/component/image-size-field</item>
<item name="label" xsi:type="string" translate="true">Image Size</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="dataScope" xsi:type="string">watermark_image_size</item>
<item name="validation" xsi:type="array">
- <item name="validate-digits" xsi:type="boolean">true</item>
+ <item name="validate-image-size-range" xsi:type="boolean">true</item>
</item>
<item name="notice" xsi:type="string" translate="true">Example format: 200x300.</item>
</item>
@@ -118,12 +119,13 @@
<field name="watermark_thumbnail_size">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
+ <item name="component" xsi:type="string">Magento_Catalog/component/image-size-field</item>
<item name="label" xsi:type="string" translate="true">Image Size</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="dataScope" xsi:type="string">watermark_thumbnail_size</item>
<item name="validation" xsi:type="array">
- <item name="validate-digits" xsi:type="boolean">true</item>
+ <item name="validate-image-size-range" xsi:type="boolean">true</item>
</item>
<item name="notice" xsi:type="string" translate="true">Example format: 200x300.</item>
</item>
@@ -181,12 +183,13 @@
<field name="watermark_small_image_size">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
+ <item name="component" xsi:type="string">Magento_Catalog/component/image-size-field</item>
<item name="label" xsi:type="string" translate="true">Image Size</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="dataScope" xsi:type="string">watermark_small_image_size</item>
<item name="validation" xsi:type="array">
- <item name="validate-digits" xsi:type="boolean">true</item>
+ <item name="validate-image-size-range" xsi:type="boolean">true</item>
</item>
<item name="notice" xsi:type="string" translate="true">Example format: 200x300.</item>
</item>
diff --git a/app/code/Magento/Catalog/view/adminhtml/web/component/image-size-field.js b/app/code/Magento/Catalog/view/adminhtml/web/component/image-size-field.js
new file mode 100644
index 0000000000000000000000000000000000000000..b330ccfd8c12531d4945fad1ea255bdee23a6404
--- /dev/null
+++ b/app/code/Magento/Catalog/view/adminhtml/web/component/image-size-field.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define([
+ 'jquery',
+ 'Magento_Ui/js/lib/validation/utils',
+ 'Magento_Ui/js/form/element/abstract',
+ 'Magento_Ui/js/lib/validation/validator'
+], function ($, utils, Abstract, validator) {
+ 'use strict';
+
+ validator.addRule(
+ 'validate-image-size-range',
+ function (value) {
+ var dataAttrRange = /^(\d+)x(\d+)$/,
+ m;
+
+ if (utils.isEmptyNoTrim(value)) {
+ return true;
+ }
+
+ m = dataAttrRange.exec(value);
+
+ return !!(m && m[1] > 0 && m[2] > 0);
+ },
+ $.mage.__('This value does not follow the specified format (for example, 200X300).')
+ );
+
+ return Abstract.extend({
+
+ /**
+ * Checks for relevant value
+ *
+ * @returns {Boolean}
+ */
+ isRangeCorrect: function () {
+ return validator('validate-image-size-range', this.value()).passed;
+ }
+ });
+});
diff --git a/app/code/Magento/Swatches/view/adminhtml/ui_component/design_config_form.xml b/app/code/Magento/Swatches/view/adminhtml/ui_component/design_config_form.xml
index 1b5ec69e5d5c246ee0acc735bce6990a07dbe1a8..0891fb351837697abcfe0f45f759d2006d35121e 100644
--- a/app/code/Magento/Swatches/view/adminhtml/ui_component/design_config_form.xml
+++ b/app/code/Magento/Swatches/view/adminhtml/ui_component/design_config_form.xml
@@ -48,12 +48,13 @@
<field name="watermark_swatch_image_size">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
+ <item name="component" xsi:type="string">Magento_Catalog/component/image-size-field</item>
<item name="label" xsi:type="string" translate="true">Image Size</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="dataScope" xsi:type="string">watermark_swatch_image_size</item>
<item name="validation" xsi:type="array">
- <item name="validate-digits" xsi:type="boolean">true</item>
+ <item name="validate-image-size-range" xsi:type="boolean">true</item>
</item>
<item name="notice" xsi:type="string" translate="true">Example format: 200x300.</item>
</item>