How to customize validate-product.js, so it will return message in popup?

Question

If a customer forgets to choose the product option of the configurable product on the product listing page and click "add to cart" it is redirecting you to the product view page with the message: "You need to choose options for your item."

I just want to show this message in a popup without redirecting on the product view page.

I makes a change on list.phtml file, so if someone click add to cart its shows required field message similar in configurable product view page. I just add validate-product.js in product listing page, but its return message not a popup.

source: Add configurable products to cart display waring message instead of redirecting

Here is my code:

define([
'jquery',
'mage/mage',
'Magento_Catalog/product/view/validation',
'catalogAddToCart',
'Magento_Ui/js/modal/modal'
], function ($) {
'use strict';

$.widget('mage.productValidate', {
    options: {
        bindSubmit: false,
        radioCheckboxClosest: '.nested',
        addToCartButtonSelector: '.action.tocart'
    },

    /**
     * Uses Magento's validation widget for the form object.
     * @private
     */
    _create: function () {
        var bindSubmit = this.options.bindSubmit;

        this.element.validation({
            radioCheckboxClosest: this.options.radioCheckboxClosest,

            /**
             * Uses catalogAddToCart widget as submit handler.
             * @param {Object} form
             * @returns {Boolean}
             */
            submitHandler: function (form) {
                var jqForm = $(form).catalogAddToCart({
                    bindSubmit: bindSubmit
                });

                jqForm.catalogAddToCart('submitForm', jqForm);

                return true;
            }
        });
        $(this.options.addToCartButtonSelector).attr('disabled', false);

        $.widget('vendor.modalForm', {
            options: {
                modalForm: '#modal-form',
                modalButton: '.tocart'
            },
            _create: function () {
                this.options.modalOption = this._getModalOptions();
                this._bind();
            },
            _getModalOptions: function () {
                /**
                 * Modal options
                 */
                var options = {
                    type: 'popup',
                    responsive: true,
                    title: '',
                    innerScroll: true,
                    buttons: false
                };

                return options;
            },
            _bind: function () {
                var modalOption = this.options.modalOption;
                var modalForm = this.options.modalForm;

                $(document).on('click', this.options.modalButton, function () {
                    //Initialize modal
                    $(modalForm).modal(modalOption);
                    //open modal
                    $(modalForm).trigger('openModal');
                });
            }
        });

        return $.vendor.modalForm;
    }
});

// return $.mage.productValidate;
});

I also create div tag with id in list.phtml, but I think I am doing wrong, let me know if anyone have another suggestion or any advice for it.

Answer 1

You need to override

Magento_Catalog/js/catalog-add-to-cart

you can override submitForm function

submitForm: function (form) {
        var i = 0;
        form.find('input').each(function () {
           if($(this).attr('aria-required'))
               if(!$(this).val())
                   i++;
        });
        if(i)
            $("#my-modal").modal("openModal");
        else
            this.ajaxSubmit(form);
    }

For Temporary Solution I am attaching a module git link. please clone it app/code folder and register it. Folder structure should be app/code/Ktpl/ProductModal

Git Repository