Making radio buttons field "required" on product page

Highlighted
New Member
1 0 0

Hi there, 

My theme is New Standard.

I have followed this tutorial to add fields to the product page. My intention is to collect extra info about how we should proceed about shipping a specific product. I have added the radio buttons to the product page, above the "add to cart" button. This was a breeze. Here is the code I used in the product.liquid file:

<p class="field">
  			<label><b>Choose an ECM shipping Method:</b></label>
  			<input type="radio" name="properties[<b>Choose an ECM shipping Method</b>]" value="Tune Only" /> <span><b>Tune Only</b> (If all you are ordering is an ECM Upgrade)</span><br />
  			<input type="radio" name="properties[<b>Choose an ECM shipping Method</b>]" value="Parts and ECM Together" /> <span><b>Parts and ECM Together</b> (We will wait until we receive your ECM so we can ship your parts and ECM together)</span><br />
  			<input type="radio" name="properties[<b>Choose an ECM shipping Method</b>]" value="ECM Express" /> <span><b>ECM Express</b> (We will ship your parts ASAP and you can send your ECM to us when ever you are ready)</span><br />
		</p>

All I need help with is making this field "required". I have tried adding class="required" and have had no luck. 

I have followed the instruction in the tutorial and added this code just above the </body> tag in theme.liquid:

{% if template contains 'product' %}
<script>
jQuery(function($) {
  $('form[action="/cart/add"]').submit(function() {
    var formIsValid = true;
    var message = "Please fill this out and you will be able to add the item to your cart.";
    $(this).find('[name^="properties"]').filter('.required, [required="required"]').each(function() {
      $(this).removeClass('error');
      if (formIsValid && $(this).val() == '') {
        formIsValid = false;
        message = $(this).attr('data-error') || message;
        $(this).addClass('error');
      }
    });
    if (formIsValid){
      return true;
    }
    else {
      alert(message);
      return false;
    }
  }).find('input, select, textarea').focus(function() {
    $(this).removeClass('error');
  });
});
</script>
{% endif %}
 
<style>
input.error, select.error, textarea.error {
  border-color: red;
}
</style>

I can make a text field required but it seems to be more complicated to do with radio buttons.

Can anyone please help? 

0 Likes
Highlighted
New Member
1 0 0

Hi, did you get any help with this?

 

I have the exact same issue.

 

Melissah

0 Likes