Magento 2 Custom Validation Rule

Question 1

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?

Question 2

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
 }
 }
 }
}

Question 3

could you please help me on this magento.stackexchange.com/questions/319106/…

Question 4

To add a custom validation for ui forms

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.")
 );
 }
});

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>

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>

Peter Horitzer Peter Horitzer 731 silver badge10 bronze badges · Answer 1 · 2018-08-10 06:13:41Z

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
 }
 }
 }
}

Share

Improve this answer

answered Aug 10, 2018 at 6:13

Peter Horitzer's user avatar

Peter Horitzer Peter Horitzer

731 silver badge10 bronze badges

1

could you please help me on this magento.stackexchange.com/questions/319106/…

Nagaraju Kasa
– Nagaraju Kasa

2020年08月06日 01:12:03 +00:00
Commented Aug 6, 2020 at 1:12

Add a comment |

Ermonela Metushi Ermonela Metushi 613 bronze badges · Answer 2 · 2022-12-20 23:11:08Z

To add a custom validation for ui forms

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.")
 );
 }
});

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>

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>

Stack Exchange Network

Magento 2 Custom Validation Rule

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

Magento 2 Custom Validation Rule

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related

Hot Network Questions