2

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?

Improve this question

2 Answers 2

Reset to default
1

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
        }
    }
  }
}
Improve this answer
1
1

To add a custom validation for ui forms

  1. Create your custom-validation.js file inside the /app/code/Vendor/Module/view/adminhtml/web/js/ directory
define([
    'jquery',
    'jquery/ui',
    'jquery/validate',
    'mage/translate'
    ], function($){
        'use strict';
        return function() {
            $.validator.addMethod(
                "custom-validation",
                function(value, element) {
                    //Perform your operation here and return the result true/false.
                    return true/false;
                },
                $.mage.__("Your validation message.")
            );
    }
});
  1. Add your js file in routename_customform_edit.xml file inside the magento-root-dir/app/code/Vendor/Module/view/adminhtml/layout/ directory
<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left"  xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="styles"/>
    <head>
        <link src="Vendor_Module::js/custom-validation.js"/>
    </head>
    <body>
        <referenceContainer name="content">
            <uiComponent name="ui_component_form"/>
        </referenceContainer>
    </body>
</page>
  1. Add your custom validation rule named custom-validation” in the store_url field in the ui_component_form.xml file as follows
<field name="store_url">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Store URL</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="dataScope" xsi:type="string">store_url</item>
                    <item name="required" xsi:type="boolean">true</item>
                    <item name="notice" xsi:type="string" translate="true">
                       Enter store URL name. For example: xyzshop
                    </item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                        <item name="custom-validation" xsi:type="boolean">true</item>
                        <item name="validate-no-html-tags" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.