Magento 2 add custom validation rule

Question

I'm going crazy here trying to add a custom validation rule to Magento 2. It's impossible to find any useful information about it.

The things I have are as follow:

1) requirejs-config.js file with the following content:

var config = {
map: {
 '*': {
 experius_postcodenl_validation_rule:'Experius_Postcode/js/validation/postcodenl-validation-rule',
 experius_postcode:'Experius_Postcode/js/widget/postcode'
 }
}};

2) Seperate javascript file:

define([
"jquery",
"experius_postcode", // Custom knockout view model
'jquery/validate',
"validation",
"mage/translate"
], function(,ドルexperiusPostcode) {
"use strict";
 $.validator.addMethod(
 'validate-postcode-housenumber-combination',
 function (value) { 
 // My validation
 },
 $.mage.__('No address could be found.')
 );
});

This should be enough to add a custom validation rule to the global jquery validator object not?

I Double checked all the file paths. The requirejs-condig.js gets loaded (checked in my browsers network tab). No 404 errors on sources whatsoever.

Am I missing something?

ps: don't mind the validation rule itself. Its still a dummy rule

Answer 1

One thing you could try is to add a JavaScript mixin:

In requirejs-config.js do:

var config = {
 config: {
 mixins: {
 'mage/validation': {
 'Vendor_Module/js/validation-mixin': true
 }
 }
 }
}

and Vendor_Module/view/frontend/web/js/validation-mixin.js:

define([
 'jquery'
], function ($) {
 "use strict";
 return function () {
 $.validator.addMethod(
 'validate-minimum-age',
 function (value) {
 // Some custom validation stuff here
 return true or false;
 },
 $.mage.__('Your validation error message')
 );
 }
});

This way your validation rule will extend the original JS validation object and will be available everywhere.

• Metal Mathematician: Would these validations also be available on the checkout?
• Sylvain Rayé: @JurģisTomsLiepiņš on my side it's not working. Magento use a different javascript called validation/rules.js but using same logic for overwriting is not working
• Sylvain Rayé: A fully working example for the checkout here magento.stackexchange.com/questions/209042/…
• Ramki: @Giel Berkers : I have tried sample code it's working fine but in production mode i'm enabling the minify js that time "validation-mixin.min.js is not created in pub/static/frontend/theme But in the url it's included like validation-mixin.min.js please check and let me know
• user46010: This doesn't work

Answer 2

Based on @Giel Berkers' answer. I had to modify the code a bit to get it working. I have added my code I used in case it's of any help.

app/design/frontend/Vendor/Theme/Vendor_Module/requirejs-config.js

var config = {
config: {
 mixins: {
 'mage/validation': {
 'Vendor_Module/js/validator-mixin': true
 }
 }
 }
};

app/design/frontend/Vendor/Theme/Vendor_Module/web/js/validator-mixin.js

define([
 'jquery',
 'moment'
], function (,ドル moment) {
 "use strict";
 return function (validator) {
 $.validator.addMethod(
 'custom-validation',
 function (value) {
 // Some custom validation
 return true or false;
 },
 $.mage.__('Your validation error message')
 );
 return validator;
 };
});

Answer 3

I discovered how the Magento team implemented a custom rule in Magento 2.4.6 in the following files:

vendor/magento/module-page-builder/view/adminhtml/requirejs-config.js
vendor/magento/module-page-builder/view/adminhtml/web/js/system/config/validator-rules-mixin.js

So I did it by next steps (which are very similar to other answers):

1)Add mixin in app/code/Vendor/Module/view/frontend/requirejs-config.js:

var config = {
 config: {
 mixins: {
 'mage/validation': {
 'Vendor_Module/js/validator-rules-mixin': true
 }
 }
 }
};

2)Add your custom rule in app/code/Vendor/Module/view/frontend/web/js/validator-rules-mixin.js :

define([
 'jquery'
], function ($) {
 "use strict";
 return function (target) {
 $.validator.addMethod(
 'validate-custom',
 function (value, element) {
 return true; //or false
 },
 $.mage.__('Your message.')
 );
 return target;
 }
});

3)Add this validation to the form field:

<div class="field custom-field">
 <label for="custom-field" class="label">
 <span>
 <?= $block->escapeHtml(__('custom-field')) ?>
 </span>
 </label>
 <div class="control">
 <input type="text"
 name="custom-field"
 id="custom-field"
 value=""
 class="input-text"
 data-validate='{"required":true, "validate-custom":true}'
 >
 </div>
</div>

Answer 4

It's working for me

1. Added a requirejs-config.js to register our new JavaScript file

var config = {
 config: {
 mixins: {
 'Magento_Ui/js/lib/validation/rules': {
 'Vendor_Module/js/validator-rules-mixin': true
 }
 }
 }
};

2. Created a new JavaScript validation rule in validator-rules-mixin.js that validates numbers between 0 and 100

define([
 'jquery',
 'mage/translate'
], function ($) {
 'use strict';
 return function (target) {
 target['validate-commission-rate'] = {
 handler: function (value, used) {
 var numValue = Number(value);
 return !isNaN(numValue) && numValue >= 0 && numValue <= 100;
 },
 message: $.mage.__('Please enter a number 0 to 100 in this field.')
 };
 return target;
 }
});

3. Apply validation rule

<input type="text" id="name" name="name" class="input-text" data-validate='{"required":true, "validate-commission-rate":true}'