How to add the validation message for add to cart button when specific field not selected

when a PDP page is loaded Required fields are not selected it display grey color after you select the required item options, that message goes away, and the add to cart button changes color and becomes active.

Add in respective function

_.extend(CartAddToCartButtonView.prototype, {
                    events: _.extend({}, CartAddToCartButtonView.prototype.events, {
                        'mouseup [data-type="add-to-cart"]': 'addToCart',
                        'click [data-type="add-to-cart"]': 'addToCart',
                        'click [data-type="show-preview"]': 'imagePreview'

                    }),

                    getContext: _.wrap(CartAddToCartButtonView.prototype.getContext, function (fn) {
                        var original_Ret = fn.apply(this, _.toArray(arguments).slice(1));
                        original_Ret.isPreviewAvailable = this.model.get('item').attributes.custitem_jj_liq_pixels_personalization;
                        let isContainsCheckColor = _.filter(this.model.get('options').models, function (option) {
                            return (option.get('cartOptionId') == "custcol_ag_checkcolors" && !option.get('value'));
                        })
                        if (isContainsCheckColor.length > 0) {
                            setTimeout(() => {
                                $('[data-type="add-to-cart"]').css('background-color', 'rgb(153, 153, 153)');
                            }, 150);
                        }

_.extend(ProductOptionModel.prototype, {
                    validation: {
                        'value.internalid': {
                            fn: function optionValueValidator() {
                                const value = this.get('value') && this.get('value').internalid;
                                //this code is added to show the validation for add to cart 
                                if (this.get('cartOptionId') == "custcol_ag_checkcolors") {
                                    if (!value) {
                                        $('.item-details-add-to-cart-help').show();
                                        return ('Please select a color');
                                    }else {
                                        $('.item-details-add-to-cart-help').hide();
                                        $('[data-type="add-to-cart"]').css('background-color', 'rgb(241, 167, 57)');
                                    }
                                }

In tpl file

<div class="items">
								<p class="item-details-add-to-cart-help">
									<i class="item-details-add-to-cart-help-icon"></i>
									<span class="item-details-add-to-cart-help-text">Please select options before adding to cart</span>
								</p>
							</div>