How to check if configurable options have been chosen before showing a modal?

Question

I have added a new button next to the add-to-cart button:

<button type="button" class="action secondary personalize" data-trigger="personalise">
    <span data-bind="i18n: 'Personalize'"></span>
</button>

The idea being, when you click on the button you can personalise further the config'd product. At the moment it is possible to get into this personalization journey without selecting the necessary product options (e.g. size and colour).

Here is my snippet from my frontend/web/js/personalise.js file:

        initializeModal: function (element) {
            let options = {
                type: 'popup', // popup or slide
                responsive: true, // true = on smaller screens the modal slides in from the right
                title: 'you are personalising : '+ this.product,
                trigger: '[data-trigger=personalise]'
            };
            //How to check if options have been selected?
            if(true) {
                //all options selected, show modal
                this.modal = modal(options, $(element));
            }
            else {
                //not all options selected, show error message.
            }
        },

How do I trigger the validation that's linked to the add to cart button (id="product-addtocart-button") without actually adding to cart when a user clicks on my personalisation button?? Basically I want to make sure that all required options are selected and, if not, show a message saying "This is a required field.". If all options are selected, then allow the modal to show.

Answer 1

Require the 'mage/validation' in your js. And find the form_id of the product add to cart form and use the below code. var isValid = $('#form_id').valid();

I hope this will trigger the default form validation with the product form. You can try that code and see if it's meet your requirment