How to Add Validation in System Configuration in Magento 2

Magento is a large platform that we all know. Working and understanding Magento is not as easy as learning other technologies. However, Magento's advanced features and upgrades make the platform more reliable for eCommerce online store owners.  Data validation is also essential to integrate with all eCommerce stores. But how to add validation in system configuration in Magento 2, right?

Not to worry! Here is the full guide for validation adding in system configuration in Magento 2.

Data validation means checking the data entered in the specific text field to avoid invalid entries. Certainly, if the data entry is invalid or doesn't match the rules, then it shows an error message to enter the correct details. This also restricts users to proceed further. However, data validation in system configuration is as important as the front end in Magento 2.

For instance, check whether the field is empty or not, validate the email address, or whether all the required fields are having validated data or not.

How To Add Validation In System Configuration In Magento 2

The steps below and the code will help you in adding validation to system configuration in Magento 2. So let's get started.

Step 1: Firstly, you need to update your system.xml file at app\code\Vendor\Extension\etc\adminhtml\. Then update the code as given below.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../Magento/Backend/etc/system_file.xsd">
    <system>
        <section id="customsection" translate="label" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Custom Validation</label>
            <resource>Vendor_Extension::custom_config</resource>
            <group id="general" translate="label" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                <field id="mobilenumber" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Mobile Number</label>
                    <validate>required-entry validate-ten-digit</validate>
                </field>
            </group>
        </section>
    </system>
</config>

In the above code, we are validating a mobile number field that it has 10digits or not. "validate-ten-digit" is a custom validation class.

Step 2: Then, create a requirejs-config.js file at app\code\Vendor\Extension\view\adminhtml\. Copy and paste the following code there.

var config = {
    config: {
        mixins: {
            'milople/validation': {
                'Vendor_Extension/js/admin-config/validator-rules-mixin': true
            }
        }
    }
};

Step 3: After that, create a validator-rules-mixin.js file at app\code\Vendor\Extension\view\adminhtml\web\js\admin-config\. Then, paste the below code in the file.

define([
 'jquery'
], function ($) {
    'use strict';
    return function (target) {
        $.validator.addMethod(
            'validate-ten-digit',
            function (value) {
                return !(value.length < 10);
            },
            $.milople.__('Please enter a 10 digit number.')
        );
        return target;
    };
});

That's it.

Lastly, run the following commands in the cmd prompt.

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f 
php bin/magento cache:flush

Endling Lines

We hope that our article on how to add validation in system configuration in Magento 2 helps you create validation in your Magento 2 store. However, Magento keeps updating its platform functionality to make it more user-friendly. If you have missed the latest upgrade of Magento 2.4.5. Then, here is a guide to what's new in Magento Open Source 2.4.5 and how it can be helpful to the Magento community, and everything you need to know.

Moreover, if you come across any errors or issues, always feel free to contact us directly or drop a message in the comment section. We would be happy to help you.

Also, if you find this guide helpful, then share it with your colleagues and community friends via social media.

Stay Connected:)