Add validation in system configuration fields before saving the information

Hello Friends!

In this blog, we will learn how we can add validation in the store configuration fields before clicking on the Save Config button or before saving the information.

If you want to learn some other ways to add validation in the system.xml file. Then check the following links:

Validate system.xml fields data when saving the configuration
Add custom validation in the input field in the system.xml

To add the validation before saving the information, please follow the below steps:

1. Create adminhtml_system_config_edit.xml file inside the app/code/Vendor/CustomModule/view/adminhtml/layout/ directory. In this file, we will use <referenceContainer name=”js”> which is defined in vendor/magento/module-config/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">
    <body>
        <referenceContainer name="js">
            <block class="Magento\Backend\Block\Template" 
                   template="Vendor_CustomModule::stores/system/config/js.phtml"/>
        </referenceContainer>
    </body>
</page>

2. Create js.phtml file inside the app/code/Vendor/CustomModule/view/adminhtml/templates/stores/system/config/ directory. In this file, we will write our validation code in jquery.

<?php ?>

<!--
/**
 * Vendor Desc.
 *
 * @category  Vendor
 * @package   Vendor_CustomModule
 * @author    Vendor
 * @copyright Vendor (https://example.com)
 * @license   https://example.com/license.html
 */
-->
<script type="text/javascript">
    require([
        "jquery",
        "prototype"
    ], function($){

        // here you can write your validation code for input fields as per your requirement

        $(document).ready(function(){
            function checkValue() {
                var obj = $('#custommodule_general_name_sort_order');
                var value = obj.val();
                if (value != '') {
                    obj.css('border', '2px solid green');
                } else {
                    obj.css('border', '2px solid red');
                }
            }
            $('#custommodule_general_name_sort_order').change(checkValue);
        });
    });
</script>

3. Now, create the system.xml file inside the app/code/Vendor/CustomModule/etc/adminhtml/ directory.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../Config/etc/system_file.xsd">
    <system>
        <tab id="vendorname" translate="label" sortOrder="10">
            <label>Vendor</label>
        </tab>
        <section id="custommodule" translate="label" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Custom Module Configuration</label>
            <tab>vendorname</tab>
            <resource>Vendor_CustomModule::config_blogs</resource>
            <group id="general" translate="label" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Display Product Attributes Sort Order Settings</label>
                <field id="name_sort_order" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Sort Order for ProductName</label>
                    <validate>required-entry</validate>
                </field>
                <field id="price_sort_order" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Sort Order for Price</label>
                    <validate>required-entry</validate>
                </field>
            </group>
        </section>
    </system>
</config>

4. See the result in the below images.