9

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?

  • 1
    which type of validation you need to put on this? – Dhiren Vasoya Oct 19 '16 at 12:19
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.

7

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>
  • 1
    This should be the accepted answer. Much more thorough. – Ethan Yehuda Jul 18 '18 at 13:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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