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
  • 1
    which type of validation you need to put on this? Commented Oct 19, 2016 at 12:19
  • Magento 2 Custom validation rules. Commented Aug 31, 2021 at 20:55

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. Commented Jul 18, 2018 at 13:21
  • yes it should be Commented May 30, 2022 at 6:55
  • It's working perfectly in Magento 2.4.6-p3. Commented Nov 14, 2024 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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.