【cartattribute】ラジオボタンのrequired属性が機能しない

[ななし]

【問題】

カート画面に追加したラジオボタンのrequired属性が機能していません。

原因がわかりません。

datepickerとプルダウンメニューのrequiredは正常に動作しています。

コード（９行目～数行部分）

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js" type="text/javascript" defer="defer"></script>

<div id=wrapper style="display:none">
  <p class="cart-attribute__field">
    <label>受取日時選択</label><br>
    <input required class="required" type="radio" name="attributes[受取日時選択]" value="発送" onclick="formSwitch()" {% if cart.attributes["受取日時選択"] == "発送" %} {% endif %} > <span>発送</span><br>
    <input required class="required" type="radio" name="attributes[受取日時選択]" value="店頭受取" onclick="formSwitch()" {% if cart.attributes["受取日時選択"] == "店頭受取" %} {% endif %} > <span>店頭受取</span><br>
  </p>
  
  <p class="cart-attribute__field">
    <div id="delivery">
      <label for="date">発送希望日:</label>
      <input required class="required" id="date" type="text" name="attributes[発送希望日]" value="{{ cart.attributes.date }}" placeholder="希望日を選択" form="cart" />
    <br>
      <label>発送希望時間帯:</label>
      <select required class="required" id="" name="attributes[発送希望時間]" form="cart">
        <option></option>
        <option value="8:00〜12:00"{% if cart.attributes["発送希望時間"] == "8:00〜12:00" %} selected{% endif %}>8:00〜12:00</option>
        <option value="12:00〜14:00"{% if cart.attributes["発送希望時間"] == "12:00〜14:00" %} selected{% endif %}>12:00〜14:00</option>
        <option value="14:00〜16:00"{% if cart.attributes["発送希望時間"] == "14:00〜16:00" %} selected{% endif %}>14:00〜16:00</option>
        <option value="18:00～20:00"{% if cart.attributes["発送希望時間"] == "18:00～20:00" %} selected{% endif %}>18:00～20:00</option>
        <option value="19:00～21:00"{% if cart.attributes["発送希望時間"] == "19:00～21:00" %} selected{% endif %}>19:00～21:00</option>
        <option value="20:00～21:00"{% if cart.attributes["発送希望時間"] == "20:00～21:00" %} selected{% endif %}>20:00～21:00</option>
       </select>
    </div>
  </p>
  
  <p class="cart-attribute__field">
   <div id="pickup">
      <label for="date2">受取希望日:</label>
      <input required class="required" id="date2" type="text" name="attributes[受取希望日]" value="{{ cart.attributes.date }}" placeholder="希望日を選択" form="cart" />
    <br>
      <label>受取希望時間帯:</label>
      <select required class="required"  id="" name="attributes[受取希望時間]" form="cart">
        <option></option>
        <option value="10:00～10:30"{% if cart.attributes["受取希望時間"] == "10:00～10:30" %} selected{% endif %}>10:00～10:30</option>
        <option value="10:30～11:00"{% if cart.attributes["受取希望時間"] == "10:30～11:00" %} selected{% endif %}>10:30～11:00</option>
        <option value="11:00～11:30"{% if cart.attributes["受取希望時間"] == "11:00～11:30" %} selected{% endif %}>11:00～11:30</option>
        <option value="11:30～12:00"{% if cart.attributes["受取希望時間"] == "11:30～12:00" %} selected{% endif %}>11:30～12:00</option>
        <option value="12:00～12:30"{% if cart.attributes["受取希望時間"] == "12:00～12:30" %} selected{% endif %}>12:00～12:30</option>
        <option value="12:30～13:00"{% if cart.attributes["受取希望時間"] == "12:30～13:00" %} selected{% endif %}>12:30～13:00</option>
        <option value="13:00～13:30"{% if cart.attributes["受取希望時間"] == "13:00～13:30" %} selected{% endif %}>13:00～13:30</option>
        <option value="13:30～14:00"{% if cart.attributes["受取希望時間"] == "13:30～14:00" %} selected{% endif %}>13:30～14:00</option>
        <option value="14:00～14:30"{% if cart.attributes["受取希望時間"] == "14:00～14:30" %} selected{% endif %}>14:00～14:30</option>
        <option value="14:30～15:00"{% if cart.attributes["受取希望時間"] == "14:30～15:00" %} selected{% endif %}>14:30～15:00</option>
        <option value="15:00～15:30"{% if cart.attributes["受取希望時間"] == "15:00～15:30" %} selected{% endif %}>15:00～15:30</option>
        <option value="15:30～16:00"{% if cart.attributes["受取希望時間"] == "15:30～16:00" %} selected{% endif %}>15:30～16:00</option>
        <option value="16:00～16:30"{% if cart.attributes["受取希望時間"] == "16:00～16:30" %} selected{% endif %}>16:00～16:30</option>
        <option value="16:30～17:00"{% if cart.attributes["受取希望時間"] == "16:30～17:00" %} selected{% endif %}>16:30～17:00</option>
        <option value="17:00～17:30"{% if cart.attributes["受取希望時間"] == "17:00～17:30" %} selected{% endif %}>17:00～17:30</option>
        <option value="17:30～18:00"{% if cart.attributes["受取希望時間"] == "17:30～18:00" %} selected{% endif %}>17:30～18:00</option>
        <option value="18:00～18:30"{% if cart.attributes["受取希望時間"] == "18:00～18:30" %} selected{% endif %}>18:00～18:30</option>
        <option value="18:30～19:00"{% if cart.attributes["受取希望時間"] == "18:30～19:00" %} selected{% endif %}>18:30～19:00</option>
        <option value="19:00～19:30"{% if cart.attributes["受取希望時間"] == "19:00～19:30" %} selected{% endif %}>19:00～19:30</option>
        <option value="19:30～20:00"{% if cart.attributes["受取希望時間"] == "19:30～20:00" %} selected{% endif %}>19:30～20:00</option>
       </select>
   </div>
  </p>
</div>

<script>

window.addEventListener('load', function() {
  if (window.jQuery) {
    let $ = window.jQuery;
    $(function() {
      $.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
        $("#date").datepicker({
          minDate: +5,
          maxDate: '+1M',
          showButtonPanel: true
        });
        $("#date2").datepicker({
          minDate: +3,
          maxDate: '+1M',
          showButtonPanel: true
        });
    });
}
document.getElementById('wrapper').style.display = 'block';	
});

 function formSwitch() {
    hoge = document.getElementsByName('attributes[受取日時選択]')
    const deliveryDate = document.getElementById('date')
    const pickupDate = document.getElementById('date2')
    const delivery = document.getElementById('delivery');
    const pickup = document.getElementById('pickup');
    const deliveryInputs = delivery.querySelectorAll('input, select');
    const pickupInputs = pickup.querySelectorAll('input, select');
    const prefix = '_';

     console.log(deliveryDate)
     console.log(pickupDate)
   
    if (hoge[0].checked) {
        // 発送が選択されたら下記を実行します
        delivery.style.display = "";
        pickup.style.display = "none";
        deliveryDate.required = true;
        pickupDate.required = false;
        toggleInputNamePrefix(deliveryInputs, prefix, false);
        toggleInputNamePrefix(pickupInputs, prefix, true);
    } else if (hoge[1].checked) {
        // 店頭受取が選択されたら下記を実行します
        delivery.style.display = "none";
        pickup.style.display = "";
        deliveryDate.required = false;
        pickupDate.required = true;
        toggleInputNamePrefix(deliveryInputs, prefix, true);
        toggleInputNamePrefix(pickupInputs, prefix, false);
    } else {
        delivery.style.display = "none";
        pickup.style.display = "none";
        toggleInputNamePrefix(deliveryInputs, prefix, true);
        toggleInputNamePrefix(pickupInputs, prefix, true);
    }
}
window.addEventListener('load', formSwitch());

function toggleInputNamePrefix(elements, prefix, isAdd) {
  elements.forEach(element => {
    if(isAdd){
      if (element.name.indexOf(prefix) < 0) {
        element.name = prefix + element.name;  
        console.log(element.class)
      }
    } else {
      if (element.name.indexOf(prefix) === 0) {
        element.name = element.name.slice(1);
        console.log(element.class)
      }
    }
  });
}
	
</script>