Magento – Magento 2 Custom Validation Rule

adminhtmlmagento2validation

I want to validate a custom-category-attribute with regex, when I modify it in backend. Therefor I want to customize validation/rules.js

src/vendor/magento/module-ui/view/base/web/js/lib/validation/rules.js

But when i save the category the validation check, won't be executed.

src/app/code/Xyz/Base/view/adminhtml/requirejs-config.js

var config = {
  config: {
    mixins: {
        'Magento_Ui/js/lib/validation/rule': {
            'Xyz/js/rules-mixin': true
        }
    }
  }
}

src/app/code/Xyz/Base/view/adminhtml/web/js/rules-mixin.js

define([
  'jquery',
  'moment'
], function ($, moment) {
  'use strict';

  return function (validator) {

    validator.addRule(
        'validate-warehouse-number',
        function (value, params, additionalParams) {
            return /^([0-9]{2}(?:\|[0-9]{2})*)?$/.test(value);
        },
        $.mage.__("Warehouse Number must have two diggest with a | as separtor")
    );

    return validator;
  };
});

Usage:

src/app/code/Xyz/Base/view/adminhtml/ui_component/category_form.xml

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<fieldset name="warehouse">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Warehouse</item>
            <item name="collapsible" xsi:type="boolean">true</item>
            <item name="sortOrder" xsi:type="number">100</item>
        </item>
    </argument>
    <field name="warehouse_number">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="sortOrder" xsi:type="number">10</item>
                <item name="dataType" xsi:type="string">text</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="label" xsi:type="string" translate="true">Warehouse Number</item>
                <item name="required" xsi:type="boolean">false</item>
            </item>
        </argument>
        <settings>
            <scopeLabel>[WEBSITE]</scopeLabel>
            <validation>
                <rule name="validate-warehouse-number" xsi:type="boolean">true</rule>
            </validation>
            <label translate="true">Warehouse Number</label>
            <dataScope>warehouse_number</dataScope>
        </settings>
    </field>
</fieldset>
</form>

Has somebody an idea what is wrong?

Best Answer

I've found the solution: rules-mixin.js must be validator-mixin.js

var config = {
  config: {
    mixins: {
        'Magento_Ui/js/lib/validation/validator': {
            'Xyz_Base/js/validator-mixin': true
        }
    }
  }
}