Magento 2: How to set custom validation message?

Question

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.

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

Answer 1

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."/>

Answer 2

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.

Answer 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