How to change error message for configurable product on product page when adding to cart without choosing attribute in Magento 2

If you get familiar with magento website, you may know the text ” this is the required field” when you add something to cart without selecting attributes. Howerver, the default text is too general and it cannot describe exactly what you really want to show to the customers, or you just want to change the text so that it will not be boring to your customers. Because of these reasons, i will show you how to chang the “this is the required field” text on product page to another text you wish.

Working with module Swatches

Firstly, the text is working with module swatches and you can just override its js file. Actually, Magento 2 has built the validation form by Jquery Validation Plugin and it’s very easy for you to customize the message theoretically. However, you have to depend on the component you are working with and it makes things more complicated. So, I suggest you use module Swatches in this situation.

Firstly, create require-js.file in app/design/frontend/vendor/theme/requirejs-config.js and add this code:

var config = {
config: {
    mixins: {
        'Magento_Swatches/js/swatch-renderer': {
            'Magento_Swatches/js/swatch-renderer-mixin': true
        }
    }
}};

In app/design/frontend/vendor/theme/Magento_Swatches/web/js/swatch-renderer-mixin.js please add this code

define(['jquery'], function ($) {
'use strict';

return function (SwatchRenderer) {
    $.widget('mage.SwatchRenderer', $['mage']['SwatchRenderer'], {
        _RenderFormInput: function (config) {
            var Txt = $.mage.__("Please select....");
            return '<input class="' + this.options.classes.attributeInput + ' super-attribute-select" ' +
                'name="super_attribute[' + config.id + ']" ' +
                'type="text" ' +
                'value="" ' +
                'data-selector="super_attribute[' + config.id + ']" ' +
                'data-validate="{required:true}" ' +
              //change this
                'data-msg-required="' + Txt + '" ' +
                'aria-required="true" ' +
                'aria-invalid="true" ';
        }
    });
    return $['mage']['SwatchRenderer'];
};});

You can change any message you want with the variable Txt. Data-msg-(rule) is used to override data message. In this case, we use data-msg-required which is execute default rule

Result