10

I'm developing the magento2 plugin(I'm kinda new in magento2), and I ran into a problem with validation the field in system.xml. I've been searching for a long time and did not find the answer. I added a new field but I need to validate this field using the regex. I saw that there is a some default validation but I need custom one, is there any way to add a new validation rule to validator?

Improve this question
2

2 Answers 2

Reset to default
4

Basically, you need to register your custom validation method and then use it for your field in system.xml file.

Define your validation method:

jQuery.validator.addMethod(
    "validate-custom", 
    function (v) {
        return jQuery.mage.isEmptyNoTrim(v) || /^[1-4]+$/.test(v);
     },
    'Please use digits only (1-4) in this field.'
);

And use it for your field in system.xml:

<validate>validate-number validate-zero-or-greater validate-custom</validate>

Search for "validator.addMethod" in the Magento 2 core code, there are a bunch of examples there showing more complex use cases.

Improve this answer
1
16

As @Wojtek Naruniec writes, you have to create your own custom validation method in a javascript file and use it in your module configuration field in system.xml file.

Suppose your field as:

<field id="color" translate="label comment" type="text" sortOrder="3" showInDefault="1" showInWebsite="1" showInStore="1">
    <label>Color</label>
    <comment>Exadecimal value, without #: ex. FFFFFF</comment>
</field>

and you would like to check field length (exactly 6 characters).

Create your javascript file,

vendorName/moduleName/view/adminhtml/web/js/validation.js

for example:

require([
    'jquery',
    'mage/translate',
    'jquery/validate'],
    function($){
        $.validator.addMethod(
            'validate-exadecimal-color-length', function (v) {
                return (v.length == 6);
            }, $.mage.__('Field must have length of 6'));
    }
);

then load javascript file in admin configuration page so you have to generate the file

vendorName/moduleName/view/adminhtml/layout/adminhtml_system_config_edit.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="vendorName_moduleName::js/validation.js"/>
    </head>
</page>

Now you can use your validator adding <validate> tag into <field> tag of your system.xml file:

<field id="color" translate="label comment" type="text" sortOrder="3" showInDefault="1" showInWebsite="1" showInStore="1">
    <label>Color</label>
    <validate>validate-exadecimal-color-length</validate>
    <comment>Exadecimal value, without #: ex. FFFFFF</comment>
</field>
Improve this answer
3
  • 2
    This should be the accepted answer. Much more thorough.
    – Ethan Yehuda
    Commented Jul 18, 2018 at 13:21
  • yes it should be
    – Mohd Shahbaz
    Commented May 30, 2022 at 6:55
  • It's working perfectly in Magento 2.4.6-p3.
    – Hafiz Arslan
    Commented Nov 14 at 13:26

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.