How to extend rules.js to add custom validation rules?


you have to set rules.js inside your theme.

First create folder inside your theme Magento_Ui if its already exist then skip it.

keep file into below location from core module.


Remove var folder. Remove pub/static folder contents and run deploy command,

php bin/magento setup:static-content:deploy

| improve this answer | |
  • it works by adding to app/code/Package/themename/Magento_Ui/web/js/lib/validation/rules.js instead of app/code/Package/themename/Magento_Ui/view/frontend/web/js/lib/validation/rules.js – Ricky.C Jul 15 '16 at 9:35
  • yes, i have mentioned view/frontend its not working for theme. I have updated my answer. thanks. – Rakesh Jesadiya Jul 15 '16 at 9:41
  • Hi Rakesh, I have fallow above step but it did not work for me. can you help me. – Sarvesh Tiwari Feb 16 '18 at 10:53
  • Shall i define this rules.js(overrided js), in checkout layout file – Jaisa Jul 12 '18 at 9:05

This is the best way to add a new rule without override the file rules.js and use on LayoutProcessor.php or jsLayout.

    ],function ($,validator) {
    "use strict";
    return validator.addRule('validade-name-of-validation',
        function (value) {
            return /* your function */
        }, $.mage.__('Your error message.')


| improve this answer | |

They way that worked for me was by extending Magento Validation:

1) Change your theme in app/design/frontend/<Vendor>/<theme>/requirejs-config.js, adding:

var config = {
map: {
    '*': {
        myCustomValidation: 'js/validation'

2) Then, create the file validation.js in app/design/frontend/<Vendor>/<theme>/web/js/ with the content:

], function($, utils){
'use strict';
    function (value) {
        return utils.isEmptyNoTrim(value) || /(^\d{4}$)/.test(value);

    $.mage.__('Please enter a valid postcode (Ex: 9060).')

Please note "validate-zip-au" is the name of my custom rule. Please replace it with whatever name you want.

3) Now add the class to the field you want in your phtml file. In my case, the class is "validate-zip-au"

4) At the end of your phtml add initialise it:

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

Redeploy your assets bin/magento setup:static-content:deploy and flush your cache.

| improve this answer | |

What does it mean Package in this case ? In example I have created custom theme, my path is:


What should I write in "Package" and what in "themename" ? Is my path would be like:


Am I correct ?

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.