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

[Greg_Baka]

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?

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>

Thank you!
Greg

[dewebkiller]

give the id “selectsizes” for the select then add simple js code:
if ($(“#selectsizes”).val() === “”) {
alert(“You must first select a size”);
}