Making a custom field (pick your own flavors) mandatory on product page

[shido]

We have a few products that are pick your own flavor packs that allow the customer to mix and match the products. Here is an example: https://shop.itsjerkyyall.com/products/3-pack-sampler-special

It works fine, but currently, they can still add to the cart without even picking any flavors. We want to make the custom flavor picking fields mandatory. 

Is there something we are missing from the code? 

                    {% else %} {% comment %} If there is no more than one product variant {% endcomment %}
                      <input type="hidden" name="id" value="{{ product.variants[0].id }}" />
                    {% endif %}

                 </div>
                  <div class="form__row">
                    <div class="quantity-field">
                      <span class="icon icon--arrow-right js-up-quantity"></span>
                      <input class="form__field" type="number" id="quantity" name="quantity" value="1" min="1" >
                      <span class="icon icon--arrow-left js-down-quantity"></span>
                    </div>
                    <span class="js-price-and-value">
                      x
                      <span class="money">
                        {{ product.selected_or_first_available_variant.price | money }}
                      </span>
                      =
                      <span class="js-total-price money">
                        {{ product.selected_or_first_available_variant.price | money }}
                      </span>
                    </span>
                  </div>

                    <p class="line-item-property__field">
                    <select class="form__field" required id="choose-an-option-1" name="properties[flavor-1]">
                    <option selected="true" disabled="disabled" value="Flavor 1">Choose Flavor 1</option>  
                    <option value="Prickly Pear Teriyaki">Prickly Pear Teriyaki</option>
                    <option value="Black Pepper & Sea Salt">Black Pepper &amp; Sea Salt</option>
                    <option value="Prickly Pear Chipotle">Prickly Pear Chipotle</option>
                    <option value="Bacon Bits">Bacon Bits</option>
                    </select>
                    </p>

                    <p class="line-item-property__field">
                    <select class="form__field" required id="choose-an-option-2" name="properties[flavor-2]">
                    <option selected="true" disabled="disabled" value="Flavor 2">Choose Flavor 2</option>  
                    <option value="Prickly Pear Teriyaki">Prickly Pear Teriyaki</option>
                    <option value="Black Pepper & Sea Salt">Black Pepper &amp; Sea Salt</option>
                    <option value="Prickly Pear Chipotle">Prickly Pear Chipotle</option>
                    <option value="Bacon Bits">Bacon Bits</option>
                    </select>
                    </p>

                    <p class="line-item-property__field">
                    <select class="form__field" required id="choose-an-option-3" name="properties[flavor-3]">
                    <option selected="true" disabled="disabled" value="Flavor 3">Choose Flavor 3</option>  
                    <option value="Prickly Pear Teriyaki">Prickly Pear Teriyaki</option>
                    <option value="Black Pepper & Sea Salt">Black Pepper &amp; Sea Salt</option>
                    <option value="Prickly Pear Chipotle">Prickly Pear Chipotle</option>
                    <option value="Bacon Bits">Bacon Bits</option>
                    </select>
                    </p>
                  
                  <div class="form__row">
                    <button id="cartButton" {% unless product.available %}disabled{% endunless %} class="btn btn--default btn--full btn--submit {% unless product.available %}btn--disabled{% endunless %} js-add-to-card" type="submit" >{% unless product.available %}{{ 'products.general.out_stock' | t }}{% else %} {{ 'layout.general.add_to_cart_button' | t }}{% endunless %}</button>
                  </div>
                </form>
              </div>

[Developer-G]

Hello,

You are missing the validations. There is 3 ways do it.
1) Disable the ajax cart (add to cart without page reload ) and implement html required. You can check here 
2) Find out the ajax function in js file and prevent 'add to cart' if flavor selection is blank.
3) Write another JS function and check fields values. If true then allow it perform it's action else prevent it and show validation with a message to select flavor first.

You can try first one if theme allows you to disable ajax. 
For other 2 you have to customize code.

Thanks 

[shido]

Hi Guleria

Can't seem to disable the ajax cart

So looking at your 2 other options. Where would ajax function be? Can't seem to find it

Thanks for your help