if radio button is selected require the input field

Question

where am I doing wrong?

I have 2 radio buttons. It is required to choose one of them.

If user selects the first one and submits the form, then the information should be send to me. This works fine.

If user selects the second radio-button, then two more input fields should be required to fill in and form should not be able to send/submit. Somehow this one is not working. Data is coming, but if I do not fill in these required fields it still goes through.

Can you help me?

<div>
<p><b>Please choose</b></p>

  <br>

  <p>
    <input type="radio" name="mypuboption" id="myoneyear" tabindex="9" required value="one year" onclick="myFunctionyear(); document.getElementById('mypubweek').removeAttribute('disabled')">
    <br>1 year
  </p>

  <br>

  <p>
    <input type="radio" name="mypuboption" id="myownyear" tabindex="10" required value="own year" onclick="myFunctionyear(); myweekselection(); document.getElementById('mypubweek').removeAttribute('disabled')">
    <br>own year
  </p>

  <p id="mypubweek" style="display:none;" align="center">
    <br>
    <input type="week" class="form-control" id="mypubstart" name="mypubstart" tabindex="11" style="width:180px; margin:auto;">
    <br>
    <select id="myownweek" name="myownweek" tabindex="12" style="width:180px; height:34px; border-radius:5px; border-color:#D1D1D1;">
      <option value="">choose</option>
      <option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>
      <option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option>
      <option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option>
      <option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option>
      <option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option>
      <option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option>
      <option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option>
      <option value="29">29</option><option value="30">30</option><option value="31">31</option><option value="32">32</option>
    </select>
  </p>

  <script>
    function myFunctionyear() {
      var checkBox = document.getElementById("myownyear");
      var text = document.getElementById("mypubweek");
      if (checkBox.checked == true){
        text.style.display = "block";
      } else {
        text.style.display = "none";
      }
    }
  </script>

  <script>
    $(function myweekselection () {
      $('input[id="myownyear"]').change(function () {
        if($(this).val() === 'value') {
          $('#myownweek').attr('required', true);
        } else {
          $('#myownweek').removeAttr('required');
        }
      });
    });
  </script>
</div>

Answer 1

Setting an input to required is used with .prop not .attr. Also, there's no need for all these functions to trigger based on clicks, simply detect a change from the radio button.

$("input[type='radio']").on("change", function(){
   if($('#secondInput').is(':checked')){
    $("input[type='text']").show();
    $("input[type='text']").prop('required',true);
  } else {
    $("input[type='text']").hide();
    $("input[type='text']").prop('required',false);
  }
});

input[type="text"] {
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>

  1<input type="radio" name="rad" value="1" required> 
  2<input type="radio" id="secondInput" name="rad" value="2">
  <input type="text">
  <input type="text">

  <button type="submit">Submit</button>
</form>