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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.