Stencil's add to cart not validating required options

Question

I have many products set up with multiple choice option sets, with the "required" checkbox ticked.

When these options sets are using the "rectangle" display mode, validation works fine. Clicking add to cart tells me to please pick an option, and won't send the form forward.

Using the "multiple choice" display mode, however does no validation at all - the request fires and the item is added to the cart. I can proceed to go to checkout and purchase the item. This is a huge potential problem, as customers can purchase items without specifying a size, color, etc and we cannot fulfill the order.

Looking at the payload of the AJAX request, instead of the attribute value being sent, "Choose options" is sent as the value for the form-data fields named attribute[###].

I have tested this both on my local server (stencil start) and after pushing a theme to the store itself. I have used both a custom internal stencil theme, and the default Cornerstone theme provided by BigCommerce.

Answer 1

Peeking at the templates/components/products/options/set-select.html file from Cornerstone 1.2.2, it seems the following changes are what ensures the validation is functioning as intended:

Putting a form-field class on the parent <div> and adding form-select form-select--small classes on the <select>.

This, however, only addresses validation on the client side, not allowing users to submit forms unless an option is picked. An invalid AJAX request will still allow the product to be added to the cart without options, and go through checkout, even if the options are marked as required.