Magento 2 - Dynamic custom validation error message not working

Question

i'm using Magento 2.4.1 and i add custom validation with a custom error message to detect which character is wrong and add it to the message:

define([
 'jquery'
], function ($) {
 return function () {
 var validator = this;
 $.validator.addMethod(
 'validate-unwanted-character',
 function (value,elm) {
 if (value.length != 0){
 var regExp = /[a-zA-Z0-9\u3040-\u30ff\u3400-\u4dbf\u4e00-\u9fff\uf900-\ufaff\uff66-\uff9f]/g;
 if(!regExp.test(value) && value.length < 2){
 var errorCharacter = value.replace(regExp, '');
 validator.errChar = $.mage.__('"%1" is an invalid character\'s, please correct your input.').replace('%1', errorCharacter)
 return false;
 }else if(!value.match("^[-A-Za-z0-9().\/ \u3040-\u30ff\u3400-\u4dbf\u4e00-\u9fff\uf900-\ufaff\uff66-\uff9f]+$")){
 var errorCharacter = value.replace(regExp, '');
 validator.errChar = $.mage.__('"%1" is an invalid character\'s, please correct your input.').replace('%1', errorCharacter)
 return false;
 }
 }
 return true;
 },
 validator.errChar //this should contain the error message but always empty
 );
 }
});

i add this validation for firstname,lastname,company, and street in edit address form in frontend. However the error message is always empty

enter image description here

when i do alert(validator.errChar) inside the if statement it is showing correct message , i pass the message to this variable so i can have dynamic message for each input element

• shankar boss: Hi @jojo did you solve this issue ? If yes, can you please update the solution here please
• Kate Suykovskaya: hello @jojo? Had you found a solution for dynamic error message?

Answer 1

The core's validation rule in vendor/magento/magento2-base/lib/web/mage/validation.js "validate-customer-password" is a good example:

1. need to pass a callback instead of static message function () { return this.passwordErrorMessage; }
2. where this.passwordErrorMessage is being defined in the validation callback: var validator = this, ... validator.passwordErrorMessage = $.mage.__('Minimum length of this field must be equal or greater than %1 symbols. Leading and trailing spaces will be ignored.').replace('%1', passwordMinLength);

Answer 2

look like you missed $.mage.__('Your validation error message')

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

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.

• jojo: i store the validation message in validator.errChar variable
• Gohil Rajesh: first try with static message "$.mage.__('Your validation error message')"
• jojo: obviously it will show the message, if i replace the validator.errChar with $.mage.__ , i need to put the message inside a variable because i want the message content to be dynamic

Answer 3

try below

define([
 'jquery'
], function ($) {
 return function () {
 var validator = this;
 $.validator.addMethod(
 'validate-unwanted-character',
 function (value,elm) {
 if (value.length != 0){
 var regExp = /[a-zA-Z0-9\u3040-\u30ff\u3400-\u4dbf\u4e00-\u9fff\uf900-\ufaff\uff66-\uff9f]/g;
 if(!regExp.test(value) && value.length < 2){
 var errorCharacter = value.replace(regExp, '');
 window.errChar = $.mage.__('"%1" is an invalid character\'s, please correct your input.').replace('%1', errorCharacter)
 return false;
 }else if(!value.match("^[-A-Za-z0-9().\/ \u3040-\u30ff\u3400-\u4dbf\u4e00-\u9fff\uf900-\ufaff\uff66-\uff9f]+$")){
 var errorCharacter = value.replace(regExp, '');
 window.errChar = $.mage.__('"%1" is an invalid character\'s, please correct your input.').replace('%1', errorCharacter)
 return false;
 }
 }
 return true;
 },
 window.errChar;
 );
 }
});

• jojo: got an error Uncaught ReferenceError: errChar is not defined
• Gohil Rajesh: updated answer, try again
• jojo: same result the window.errChar is empty