Modify “Add to Cart” button (form) to require selecting a variant

Question

Our store site has a few product pages where the customer needs to select a size or version BEFORE clicking “Add to Cart”. If they forget to do that, the shopping cart displays an error message that we believe is causing a lot of cart abandoned issues. Here is an example page: https://www.easydigging.com/garden-hoes/grub-hoe.html

It would be great if we could add a little code that both: a) prevents the “Add to Cart” button from working if a variant has not been selected, AND b) displays a message like “You must first select a size”

Can you tell me how to modify the form code below to create that effect?

If not, do you have a simple solution using html and a little JS?

I think this old post may have some clues, but I do not understand how to add it to our form... Prevent to click "Add to Cart" button if specific product not selected - Shopify

Here is the current "Add to Cart" code from our page:

<form method="post" action="https://secure.easydigging.com/cgi-bin/UCEditor" >

  <input type="hidden" name="merchantId" value="TOOL" />
     <b class="pulsate">Select:</b>
     <select class="form-control" name="add" style="color:black; font-size:15px; width:140px; padding:5px; display:inline;">
                <option value="0" selected>Click for sizes</option>
                <option value="HOE-06-GRUB-1.390">6" wide: $42.95 </option>
                <option value="HOE-04-GRUB-1.390">4" wide: $42.95 </option>
     </select>

     <b>&nbsp; Qty:</b>
     <input class="form-control" style="color:black; font-size:15px; width:40px; text-align:center; display:inline;" type="text" name="quantity" value="1" />
     <br />   
     <input class="btn btn-sm btn-cart" type="submit" name="submit" value="Add To Cart" title="Buy a grub hoe." style="width:285px; font-size:18px; margin-top:14px; margin-left:2px; padding:5px;" />

</form>

Answer 1

You're super close! I added two HTML attributes and changed a third in your example to make sure an option MUST be selected from the dropdown before the user clicks submit.

First change, I added the 'disabled' attribute to your default option element so that the form wouldn't let it be re-selected. I also changed its value to an empty string because this helps most browsers understand the value is invalid. We discovered Firefox was the only browser that didn't need an empty value. Beyond html5 form validation, you'll need to use JS if you want more fine-tuned control of that UI.

• See this answer for tips on having an option element that is just for decoration.
• And here is MDN's documentation on the required attribute.
• Here's MDNs documentation on client-side form validation.
• Chrome et al require a disabled option to have an empty value as well, here's another answer that I used to fix this snippet.

Second change, I added the 'required' attribute to the select element so the form can't be submitted until the option is made.

<form method="post" action="https://secure.easydigging.com/cgi-bin/UCEditor" >
  <input type="hidden" name="merchantId" value="TOOL" />
  <b class="pulsate">Select:</b>
  <select class="form-control" name="add" style="color:black; font-size:15px; width:140px; padding:5px; display:inline;" required>
    <option value="" selected disabled>Click for sizes</option>
    <option value="HOE-06-GRUB-1.390">6" wide: $42.95 </option>
    <option value="HOE-04-GRUB-1.390">4" wide: $42.95 </option>
  </select>

  <b>&nbsp; Qty:</b>
  <input class="form-control" style="color:black; font-size:15px; width:40px; text-align:center; display:inline;" type="text" name="quantity" value="1" />
  <br />   
  <input class="btn btn-sm btn-cart" type="submit" name="submit" value="Add To Cart" title="Buy a grub hoe." style="width:285px; font-size:18px; margin-top:14px; margin-left:2px; padding:5px;" />
</form>

In a recent comment, the original poster asks:

One of the articles you linked suggests using required="required" instead of just required by itself. Before I start editing lots of pages, do you know if the format with = in the middle has any big advantages or disadvantages? Maybe on mobile browsers?

That's an interesting question. Looking at the two MDN links I posted, there is only one instance of assigning required to required, i.e. required="required". But which way is correct? Both! Here's what the specification says:

2.4.2 Boolean attributes

A number of attributes are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.

To sum it up, both are 100% valid according to HTML5 specification. Use whichever you prefer and don't worry about it unless it becomes an issue. (It probably won't.)

• Spec for the required attrbiute
• Spec for boolean attributes.