How to Set Custom Validation Message in Magento 2?

 

 

In today's tutorial, we will guide you with a detailed step by step process to set up custom validation message in Magento 2. With a custom validation message rule, you can write your own message at the time of validation of a customer's account/details.

Step 1. Create a new js file

It is necessary to create a new js file, in order to add custom validation message. Let’s create a file with the name magedelightValidationRule.js. File path should be app/code/<Vendor-name>/<Module-name>/view/frontend/web/js/magedelightValidationRule.js.

In this file, add the below snippet:

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

Here is the basic structure of js file. For adding a new method, you'll need to include require js file. We have created magedelightvalidationrule. You can give any name for the validation rule. We used jquery validator's addmethod to register a new method.

You can perform your logic for creating your validation rule within the addMethod function parameter. After the operation is performed, you can return true/false depending on the condition on your store. Now, the validation message is the last parameter of addMethod. In this, you can add your custom validation message that will be displayed when the validation fails.

Step 2. Register a New js File

Now you need to register the js file that we just created. First, you need to create a file requirejs-config.js inside app/code/<VendorName>/<ModuleName>/view/frontend/requirejs-config.js.

Then, add the below-mentioned code inside the filerequirejs-config.js.

var config = {
map: {
"*": {
magedelightMethod: "<VendorName_ModuleName>/js/magedelightValidationRule"
}
}
};

In the above code, you can replace the module name, vendor name, and file name.

Post that, add the below-mentioned code in the phtml.file

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

You can also access these params inside magedelightValidationRule.js file using the methods given below.

define([
 'jquery',
 'jquery/ui',
 'jquery/validate',
 'mage/translate'
], function($){
 'use strict';
 return function(param) {
 console.log(param);
 $.validator.addMethod(
 "magedelightvalidationrule",
 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

Now that we have created the new rule successfully, let us use this rule in the form. You'll be required to add a new method inside data-validate attribute for the specific field inside the form.

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

data-validate="{required:true, 'magedelightvalidationrule':true}"

We have successfully bound the newly created method with the form.

Also read: How to Enable Phone Number Validation in Magento 2 Commerce?

Step 4. Clear Cache and Check the Form

Execute these commands and refresh the page.

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

You can check your validation now. Fill up the form and click on submit button to check your validation.

We hope we are clear about everything related to creating custom validation message in Magento 2. If still need our professional assistance with Magento Development Services, feel free to reach us out.

Also read: How to Remove or Manage Message Inbox in Magento 2?