{"id":1054,"date":"2020-06-12T11:57:49","date_gmt":"2020-06-12T11:57:49","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/2020\/06\/12\/add-custom-js-validation-rule-in-magento-2\/"},"modified":"2025-05-22T12:48:47","modified_gmt":"2025-05-22T07:18:47","slug":"add-custom-js-validation-rule-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-custom-js-validation-rule-in-magento-2\/","title":{"rendered":"How to Add Custom JS Validation Rule in Magento 2"},"content":{"rendered":"\n

E-commerce stores that offer their products or services to limited customers or based on specific conditions require to set validations before agreeing to serve them.<\/p>\n\n\n\n

As the default Magento 2 does not offer such custom validations, I\u2019ve come up with a method to add custom JS validation rule in Magento 2<\/strong><\/em>. Likewise you can also set custom validation message<\/a>, This will allow you to display a custom message in the front end when the user enters an invalid or blank input.<\/p>\n\n\n\n

For example, while asking contact details from the customers, you do not want spam or fake data from unwanted users. These users are just there to spam you and processing their data is a waste of time and money.<\/p>\n\n\n\n

So you can set custom validations like the correct format of email addresses, or the contact number of the specific country only to be accepted.<\/p>\n\n\n\n

Doing so, you can eliminate the fake details or stop the users that you do not wish to serve. This method is also useful if you are a Magento 2 store for the local customer base only! The below solution allows you to validate the zip code at the checkout page.<\/p>\n\n\n\n

Examples of validation:<\/p>\n\n\n\n

Customer login<\/strong><\/p>\n\n\n

\n
\"Annotation-on-2020-06-04-at-11-02-57\"<\/figure>\n<\/div>\n\n\n

Customer Registration<\/strong><\/p>\n\n\n\n

\"Annotation-on-2020-06-04-at-11-01-53\"<\/figure>\n\n\n\n

Method to add custom JS validation rule in Magento 2:<\/h2>\n\n\n\n

Add requirejs-config.js<\/strong> file to the following location:<\/p>\n\n\n\n

app\/code\/[Vendor]\/[Module]\/view\/frontend\/requirejs-config.js<\/strong><\/p>\n\n\n\n

    var config = {\n        map: {\n            '*': {\n                \"Magento_Ui\/js\/lib\/validation\/rules\": \"Vendor_Module\/js\/lib\/validation\/rules\"\n            }\n        }\n    };<\/pre>\n\n\n\n
Copy file  vendor\/magento\/module-ui\/view\/base\/web\/js\/lib\/validation\/rules.js<\/strong><\/p>\n\n\n\n
to<\/p>\n\n\n\n
app\/code\/[Vendor]\/[Module]\/view\/frontend\/web\/js\/lib\/validation\/rules.js<\/strong><\/p>\n\n\n\n
Where you can add the custom validation code as following:<\/p>\n\n\n\n
    'validate-indian-zip-code-format': [\n            function (value, param) {\n                return \/^[0-9]{6}$\/.test(value);\n            },\n            $.mage.__('Please enter 6 Digits')\n        ]<\/pre>\n\n\n\n
That\u2019s it.<\/p>\n\n\n\n
You can refer the method to override JS file in Magento 2<\/a> for easy implementation.<\/p>\n\n\n\n
Also, please share the solution with fellow Magento developers via social media.<\/p>\n\n\n\n
Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":"
E-commerce stores that offer their products or services to limited customers or based on specific conditions require to set validations before agreeing to serve them….<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1054","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1054","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=1054"}],"version-history":[{"count":3,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1054\/revisions"}],"predecessor-version":[{"id":14864,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1054\/revisions\/14864"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=1054"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=1054"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=1054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}