Menu Close
    Searching for an experienced Magento 2 Development Company ?

    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.

    configResult1
    Result: When the input field is empty
    configResult2
    Result: When the input field is filled

    Hope this will be helpful. Thanks 🙂

    Previous Blog: Fixed: SQLSTATE[23000]: Integrity constraint violation: 1052

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top