3

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

Improve this question
2
  • 1
    Hi @jojo did you solve this issue ? If yes, can you please update the solution here please Commented Dec 12, 2023 at 3:21
  • hello @jojo? Had you found a solution for dynamic error message? Commented Apr 8, 2024 at 15:06

3 Answers 3

Reset to default
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);
Improve this answer
0

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.

Improve this answer
3
  • i store the validation message in validator.errChar variable Commented Sep 2, 2021 at 7:20
  • first try with static message "$.mage.__('Your validation error message')" Commented Sep 2, 2021 at 7:21
  • 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 Commented Sep 2, 2021 at 7:22
0

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;
        );
    }
});
Improve this answer
3
  • got an error Uncaught ReferenceError: errChar is not defined Commented Sep 2, 2021 at 7:28
  • updated answer, try again Commented Sep 2, 2021 at 7:31
  • same result the window.errChar is empty Commented Sep 2, 2021 at 7:35

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.