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


4 Answers 4


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

  • 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, 2016 at 9:35
  • yes, i have mentioned view/frontend its not working for theme. I have updated my answer. thanks. Jul 15, 2016 at 9:41
  • Hi Rakesh, I have fallow above step but it did not work for me. can you help me. Feb 16, 2018 at 10:53
  • Shall i define this rules.js(overrided js), in checkout layout file
    – Jaisa
    Jul 12, 2018 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.')



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.


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 ?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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