How to Set Custom Validation Message in Magento 2

Magento 2 development we receive various data from users. This data needs to be checked for correct input. The validity of the data entered by the user can be checked via default Magento tools. With a custom validation message rule, you can write your own message at the time of validation of a customer’s account/details or any form.

Magento 2 default  You can see the list of jquery rules in the lib/web/jquery/jquery.validate.js file and see the list of Magento rules in the lib/web/mage/validation.js file.

Let’s follow the below steps!

Here we are using Dolphin as Vendor name and CustomValidation as the name of a module.  You can change this according to your Vendor and Module name

Read this: Add custom Js in Magento 2

Step 1: Create a new js file

The first thing you need to do is to create a dolphinValidationRule.js file in the folder app/code/Dolphin/CustomValidation/view/frontend/web/js with the following code.

define([
    'jquery',
    'jquery/ui',
    'jquery/validate',
    'mage/translate'
], function ($) {
    'use strict';
    return function () {
        $.validator.addMethod(
            "dolphinvalidationrule",
            function (value, element) {
                //Perform your operation here and return the result true/false.
                return true / false;
            },
            $.mage.__("Your validation message.")
        );
    }
});

Above js file, You need to include required js file for adding a new method.

Here we have added the validation rule dolphinvalidationrule. You can give any name for your validation rule. We have used the jquery validator’s addMethod for registering a new method.

You can perform your logic for validation rule inside addMethod function parameter. After performing the operation you can return true/false depending on your condition. Now validation message is the last parameter of addMethod is a validation message. Here you can add your custom validation message which will be displayed when the validation fails.

Step 2: Register a new js file

You need to register newly created js.

create a file requirejs-config.js in app/code/Dolphin/CustomValidation/view/frontend folder with the following code.

var config = {
    map: {
        "*": {
            dolphinMethod: "Dolphin_CustomValidation/js/dolphinValidationRule"
        }
    }
};

You need to add the below code in your phtml file.

<script type="text/x-magento-init">
   {
       "*": {
           "dolphinMethod": {
               "param": "paramvalue"
           }
       }
   }
</script>

Above code, param is an argument to the js file.

You can access these params inside dolphinValidationRule.js file using the below code.

define([
    'jquery',
    'jquery/ui',
    'jquery/validate',
    'mage/translate'
], function($){
    'use strict';
    return function(param) {
        console.log(param);
        $.validator.addMethod(
            "dolphinvalidationrule",
            function(value, element) {
                //Perform your operation here and return the result true/false.
                return true/false;
            },
            $.mage.__("Your validation message.")
        );
    }
});

Step 3: Apply the newly created rule to the form fields

Successfully added a new custom method in jquery validation.

You need to add a new method inside data-validate attribute for the specific field in the form.

Here dolphinvalidationrule is the name of our newly created validation rule.

[dt_highlight color="" text_color="" bg_color=""]data-validate="{required:true, 'dolphinvalidationrule':true}"[/dt_highlight]

Now execute below command and referesh the page:

[dt_highlight color="" text_color="" bg_color=""]php bin/magento s:up[/dt_highlight]
[dt_highlight color="" text_color="" bg_color=""]php bin/magento s:s:d -f[/dt_highlight]
[dt_highlight color="" text_color="" bg_color=""]php bin/magento c:c[/dt_highlight]

I hope this blog is easy to understand about how to set custom validation message in Magento 2.

if you are facing any issues during implementation, use the comment section below!

Happy Coding!

Jigar Patel

Author