Custom swatch message 'This is a required field'

Question

Is there a way to customize the 'This is a required field' message when you don´t select a swatch option?

I want to change it to "Please select a color" and "Please select a size"

Thanks!

Answer 1

This is what exactly you are looking for.

@max pronko has describe everything in detail here how to change custom validation with magento mixin.

Full Youtube Video Guid Here

Thanks to Max Pronko

Answer 2

This message comes from the mage/Validation.js

$.validator.messages = $.extend($.validator.messages, {
    required: $.mage.__('This is a required field.'),
    remote: $.mage.__('Please fix this field.'),
    email: $.mage.__('Please enter a valid email address.'),
    url: $.mage.__('Please enter a valid URL.'),
    date: $.mage.__('Please enter a valid date.'),
    dateISO: $.mage.__('Please enter a valid date (ISO).'),
    number: $.mage.__('Please enter a valid number.'),
    digits: $.mage.__('Please enter only digits.'),
    creditcard: $.mage.__('Please enter a valid credit card number.'),
    equalTo: $.mage.__('Please enter the same value again.'),
    maxlength: $.validator.format($.mage.__('Please enter no more than {0} characters.')),
    minlength: $.validator.format($.mage.__('Please enter at least {0} characters.')),
    rangelength: $.validator.format($.mage.__('Please enter a value between {0} and {1} characters long.')),
    range: $.validator.format($.mage.__('Please enter a value between {0} and {1}.')),
    max: $.validator.format($.mage.__('Please enter a value less than or equal to {0}.')),
    min: $.validator.format($.mage.__('Please enter a value greater than or equal to {0}.'))
});

If you look in the dom, the attribute code is on the div that holds the size <div class="swatch-attribute size" attribute-code="size" attribute-id="141"> as a param attribute-code so you can write some JS to get the attribute code and write a more meaningful validation/error message