5

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.

  • did you get any solution for this ? – Manashvi Birla May 22 '17 at 10:57
  • no, i didnt get the solution – Sanjay Jethva May 24 '17 at 6:03
16

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."/>
  • 1
    This worked for me. – Jiyaad.D Mar 7 '18 at 10:21
  • 1
    This is the right way! – Eugene Zubkov Oct 26 '18 at 9:16
  • this is more proper way to change validation message – Murtuza Zabuawala Jan 10 at 14:23
  • Great. It works like charm! – Sumit Verma Apr 30 at 9:22
4

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.

3

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

  • 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 '17 at 10:23
  • @SejalShah Are you trying to change the validation.js directly ? – M2 Doctor Jul 15 '17 at 11:21
  • yes...I changed directly in validation.js just to check. I was goin to override it later – Sejal Shah Jul 15 '17 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 '17 at 11:40
  • I just wanted to change the message. No need to change the class right ? – Sejal Shah Jul 15 '17 at 11:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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