How to Add Custom Validation Rule in Magento 2

In this article, I'll let you know how to add a custom validation rule in Magento 2. As we all know Magento by default provides lots of default validation rules. Mostly will be useful to check different validation for form fields. But, in some cases, if you want to create a custom validation rule for your client's custom requirement then, you need to follow the below steps.

Before we start I assume, you have already a created custom module. If you don't have it or don't know how to create it then check out our other article How To Create a Magento 2 Module.

Let's get started !!

Step 1: Create requirejs-config.js at app/code/Vendor/CustomValidation/view/adminhtml and paste the below code. You need to change code as per your requirement.

saveCopyzoom_out_map
var config = {
    config: {
        mixins: {
            'mage/validation': {
                'Vendor_CustomValidation/js/admin-config/validator-rules-mixin': true
            }
        }
    }
};

In above code I've extended mage/validation with my Vendor_CustomValidation/js/admin-config/validator-rules-mixin js file.

Step 2: Create validator-rules-mixin.js file at app/code/Vendor/CustomModule/view/adminhtml/web/js/admin-config/ to extend original function.

Here I just try to add a new validation rule name with custom-validation which will check a string length should be greater then or equal to 10.

saveCopyzoom_out_map
define([
    'jquery'
], function ($) {
    'use strict';
    return function (target) {
        $.validator.addMethod(
            'custom-validation',
            function (value) {
                return !(value.replace(/ /g,'').length < 10);
                // This will remove all white space from string and then count.
            },
            $.mage.__('Please enter at list 10 letters.')
        );
        return target;
    };
});

Now, we're going to use this rule in system.xml file. So, now we create system.xml and add new validation rule in a text field.

saveCopyzoom_out_map
<?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>
        ...
        <field id="text" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Text</label>
            <validate>custom-validation</validate>
        </field>
        ...
    </system>
</config>

In above code we've used <validate>custom-validation</validate> which are our new validation rule.

Bingo, we are almost done.

Now, open Command line in folder root of magento and run the below commands.

saveCopyzoom_out_map
php bin/magento s:up

php bin/magento s:s:d -f

php bin/magento c:c

Hope it'll work 🙏 Open configuration and check your input field validation.

That’s it!!

We hope this Magento post helped you to know How to Add Custom Validation Rule in Magento 2. Bookmark it for your future reference. Do comment below if you have any other questions or doubts.

P.S. Do share this post with your team.