How to Add Custom JS Validation Rule in Magento 2
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.
As the default Magento 2 does not offer such custom validations, I’ve come up with a method to add custom JS validation rule in Magento 2. Likewise you can also set custom validation message, This will allow you to display a custom message in the front end when the user enters an invalid or blank input.
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.
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.
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.
Examples of validation:
Customer login
Customer Registration
Method to add custom JS validation rule in Magento 2:
Add requirejs-config.js file to the following location:
app/code/[Vendor]/[Module]/view/frontend/requirejs-config.js
|
1 2 3 4 5 6 7 |
var config = { map: { '*': { "Magento_Ui/js/lib/validation/rules": "Vendor_Module/js/lib/validation/rules" } } }; |
Copy file vendor/magento/module-ui/view/base/web/js/lib/validation/rules.js
to
app/code/[Vendor]/[Module]/view/frontend/web/js/lib/validation/rules.js
Where you can add the custom validation code as following:
|
1 2 3 4 5 6 |
'validate-indian-zip-code-format': [ function (value, param) { return /^[0-9]{6}$/.test(value); }, $.mage.__('Please enter 6 Digits') ] |
That’s it.
You can refer the method to override JS file in Magento 2 for easy implementation.
Any doubts? If so, do not hesitate to mention them in the Comments section below.
I’ll help you out asap.
Also, please share the solution with fellow Magento developers via social media.
Thank you.
Related Articles:
- How to Add Validation in System Configuration in Magento 2
- How to Add Custom Validations Before Order Placement in Magento 2
2 Comments
I want to add custom validation in customer registration form, /admin/customer/index/new/
what i need to do to implement custom validation in this form?
Hello Aftab,
This is to inform you that the blog is written for the frontend. You wish to implement this for the admin side which is not possible using the given code.
Thank you.