7

I want to change Magento 2 validation message with my custom message. on product detail page if I click add to cart button without selecting options than its shows This is a required field. but I want to change it with my custom message like Please select size.

enter image description here

Can anyone help me with this? Thanks for your answer in advance.

2
  • did you get any solution for this ? May 22, 2017 at 10:57
  • no, i didnt get the solution May 24, 2017 at 6:03

3 Answers 3

34

Just go-to that input field and add a custom attribute "data-msg-required"

data-msg-(validator name)

Like..

<input name="qty" id="qty" class="input-text" type="text" data-validate='{"required":true}' data-msg-required="Please select size."/>
6
  • 2
    This worked for me.
    – Jiyaad.D
    Mar 7, 2018 at 10:21
  • 1
    This is the right way! Oct 26, 2018 at 9:16
  • this is more proper way to change validation message Jan 10, 2019 at 14:23
  • Great. It works like charm! Apr 30, 2019 at 9:22
  • Superb!!!!!!!!! Sep 21, 2020 at 13:09
6

I found this solution and worked for me

    require([
    'jquery',
    'jquery/ui',
    'jquery/validate',
    'mage/translate'
], function($){
    $("div#product-options-wrapper select").addClass("product-custom-option-required").removeClass("required");

    $.validator.addMethod(
        'product-custom-option-required', function (value) {
            if(value) return true;
            else return false;
        }, $.mage.__('Please select a variant!'));
});

I am adding class to select element product-custom-option-required and remove required class. After that I put my custom validation and as you can see at the last row I put custom text for custom validation message.

5

Here is the solution which worked for me to changing the message of password field. It might help you in your direction.I have created script rather than overriding entire validation.js. I have added new function and replace error with new. As magento2 is using jquery validation. I have taken this function from validation.js

require([
            'jquery',
            'jquery/ui',
            'jquery/validate',
            'mage/translate'
        ], function($){
            $('#password').attr('data-validate', $('#password').attr('data-validate').replace('validate-customer-password','validate-customer-password-custom'));
            $.validator.addMethod(
                'validate-customer-password-custom', function(v, elm) {
                var validator = this,
                    length = 0,
                    counter = 0;
                var passwordMinLength = $(elm).data('password-min-length');
                var passwordMinCharacterSets = $(elm).data('password-min-character-sets');
                var pass = $.trim(v);
                var result = pass.length >= passwordMinLength;
                if (result == false) {
                    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);
                    return result;
                }
                if (pass.match(/\d+/)) {
                    counter ++;
                }
                if (pass.match(/[a-z]+/)) {
                    counter ++;
                }
                if (pass.match(/[A-Z]+/)) {
                    counter ++;
                }
                if (pass.match(/[^a-zA-Z0-9]+/)) {
                    counter ++;
                }
                if (counter < passwordMinCharacterSets) {
                    result = false;
                    validator.passwordErrorMessage = $.mage.__(
                        "Minimum of different classes of characters in password is %1." +
                        " Classes of characters: Lower Case, Upper Case, Digits, Special Characters."
                    ).replace('%1', passwordMinCharacterSets);
                }
                return result;
            }, function () {
                return this.passwordErrorMessage;
            });
        });

Here is more detail about this solution on my own blog and entire module for this on my Github repository

8
  • I used your module and it worked. However when I tried to do it in the validation.js itself it dint work. Any idea why it dint work?
    – Sejal Shah
    Jul 11, 2017 at 10:23
  • @SejalShah Are you trying to change the validation.js directly ?
    – M2 Doctor
    Jul 15, 2017 at 11:21
  • yes...I changed directly in validation.js just to check. I was goin to override it later
    – Sejal Shah
    Jul 15, 2017 at 11:26
  • You can then go to validation js and change the class. Please notice that validation.js will also available in pub/static folder.
    – M2 Doctor
    Jul 15, 2017 at 11:40
  • I just wanted to change the message. No need to change the class right ?
    – Sejal Shah
    Jul 15, 2017 at 11:49

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.