MC-3723: Advanced properties saving when invalid value is specified

- add validation to margin and padding base form
- validate-number, and is between 0-999

Author: anthoula

app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_base_form.xml

@@ -198,6 +198,11 @@
             <settings>
                 <label translate="true">Margins and Padding</label>
                 <placeholder translate="true">Default</placeholder>
+                <validation>
+                    <rule name="validate-number" xsi:type="boolean">true</rule>
+                    <rule name="less-than-equals-to" xsi:type="number">999</rule>
+                    <rule name="greater-than-equals-to" xsi:type="number">0</rule>
+                </validation>
             </settings>
         </field>
     </fieldset>

app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/validator-rules-mixin.js

@@ -46,6 +46,9 @@ define([
 
     return function (validator) {
         var requiredInputRule = validator.getRule('required-entry');
+        var validateNumberRule = validator.getRule('validate-number');
+        var lessThanEqualsToRule = validator.getRule('less-than-equals-to');
+        var greaterThanEqualsToRule = validator.getRule('greater-than-equals-to');
 
         validator.addRule(
             'required-entry-location-name',
@@ -115,6 +118,66 @@ define([
             $.mage.__(requiredInputRule.message)
         );
 
+        validator.addRule(
+            'validate-number',
+            function (value) {
+                var allNumbers = true;
+
+                if (typeof value !== 'object') {
+                    return validateNumberRule.handler(value);
+                }
+
+                _.flatten(_.map(value, _.values)).forEach(function(val) {
+                    if (!validateNumberRule.handler(val)) {
+                        return allNumbers = false;
+                    }
+                });
+
+                return allNumbers;
+            },
+            $.mage.__(validateNumberRule.message)
+        );
+
+        validator.addRule(
+            'less-than-equals-to',
+            function (value, params) {
+                var allNumbers = true;
+
+                if (typeof value !== 'object') {
+                    return lessThanEqualsToRule.handler(value);
+                }
+
+                _.flatten(_.map(value, _.values)).forEach(function(val) {
+                    if (!lessThanEqualsToRule.handler(val, params)) {
+                        return allNumbers = false;
+                    }
+                });
+
+                return allNumbers;
+            },
+            $.mage.__(lessThanEqualsToRule.message)
+        );
+
+        validator.addRule(
+            'greater-than-equals-to',
+            function (value, params) {
+                var allNumbers = true;
+
+                if (typeof value !== 'object') {
+                    return greaterThanEqualsToRule.handler(value);
+                }
+
+                _.flatten(_.map(value, _.values)).forEach(function(val) {
+                    if (!greaterThanEqualsToRule.handler(val, params)) {
+                        return allNumbers = false;
+                    }
+                });
+
+                return allNumbers;
+            },
+            $.mage.__(greaterThanEqualsToRule.message)
+        );
+
         return validator;
     };
 });