How to Add Validation in System Configuration in Magento 2

Magento 2 is a flexible platform that allows extending its functionality to satisfy the business requirements. Data validation is one such integral part that needs to be implemented for any type of E-commerce stores.

Not only frontend, but you may also want to add validation in system configuration in Magento 2. For example, validate the Email, check for the blank field, etc.

Using the below solution, you can validate any type of input fields in the Magento 2 stores configuration such as text field, date, drop-down, etc. as shown in the figure:

Method to Add Validation in System Configuration in Magento 2:

Place the below code at app/code/Meetanshi/HelloWorld/etc/adminhtml/system.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="meetanshi" translate="label" sortOrder="50">
            <label><![CDATA[<img src="https://meetanshi.com/media/logo.png" alt="Meetanshi" height="20" style="vertical-align:middle;"/>]]></label>
        </tab>
        <section id="helloworld" translate="label" type="text" sortOrder="40" showInDefault="1" showInWebsite="1"
                 showInStore="1">
            <class>separator-top</class>
            <label>Hello World</label>
            <tab>meetanshi</tab>
            <resource>Meetanshi_HelloWorld::config_helloworld</resource>
            <group id="general" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1"
                   showInStore="1">
                <label>Configuration</label>
                <field id="enable" translate="label comment" type="select" sortOrder="10" showInDefault="1"
                       showInWebsite="1" showInStore="1">
                    <label>Hello World</label>
                    <source_model>Magento\Config\Model\Config\Source\Enabledisable</source_model>
                </field>
            </group>
        </section>
    </system>
</config>

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">

</tab>

<section id="helloworld" translate="label" type="text" sortOrder="40" showInDefault="1" showInWebsite="1"

showInStore="1">

<class>separator-top</class>

<label>Hello World</label>

<tab>meetanshi</tab>

<resource>Meetanshi_HelloWorld::config_helloworld</resource>

<group id="general" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1"

showInStore="1">

<label>Configuration</label>

<field id="enable" translate="label comment" type="select" sortOrder="10" showInDefault="1"

showInWebsite="1" showInStore="1">

<label>Hello World</label>

<source_model>Magento\Config\Model\Config\Source\Enabledisable</source_model>

</field>

</group>

</section>

</system>

</config>

That’s it.

Any doubts? Use the Comments section below to mention them. I’ll be happy to help.

Feel free to share the solution with fellow developers via social media to validate the input fields in Magento 2 system configuration.

Thanks.

(based on 4 Reviews)

How to Add Validation in System Configuration in Magento 2

Method to Add Validation in System Configuration in Magento 2:

Sanjay Jethva

Leave a Reply Cancel reply