An invalid form control with name='' is not focusable WITH MODAL

Question

Edit: this is not a duplicate, because I am using HTML5 validating and the required attribute, and when the input is hidden with the modal, the required attribute is removed from it. I only have it as required when the fixed-term radio button is clicked and during the time the modal is open. When submitting the form, it is not required anymore (although this might not be the right way to solve this).

/*Change expiration date input to required once the fixed term choice is 
taken, change back when open-ended is chosen*/

function updateRequired() {
document.getElementById('expdate').required = true;
}

function updateNonRequiredCancel() {
document.getElementById('expdate').removeAttribute('required');
radiobtn = document.getElementById("openend");
radiobtn.checked = true;
}

function updateNonRequired() {
document.getElementById('expdate').removeAttribute('required');
}

My problem:

Seen some posts on this topic, but no solutions have worked yet. I have a form with many inputs I'm trying to validate. Currently I am stuck on validating an input inside a bootstrap modal, since it keeps giving me the error: "An invalid form control with name='expdate' is not focusable." when I try to submit the form. All other inputs validate fine outside the radio buttons and modal.

The modal is toggled when the radio button "fixed-term" is chosen and contains the input to choose an expiration date. I have some onclick functions in there for: 1) when open-ended is clicked, 'expdate' is no longer required 2) when fixed-date is chosen, 'expdate' is required 3) when cancel is clicked inside the modal, 'expdate' is no longer required and the radio button selection goes to open-ended automatically 4) when save changes is clicked I validate whether the 'expdate' field is empty or not.

These onclick functions work fine, for example I can't save changes inside the modal without entering an expiration date. Only problem arises when trying to submit the whole form.

<fieldset>
    <div class="form-check form-check-inline">
         <input type="radio" required class="form-check-input" id="openend" 
name="term" onClick="updateNonRequired();">
         <label class="form-check-label" for="openend">
            Open-ended
         </label>
    </div>
    <div class="form-check form-check-inline">
         <input type="radio" class="form-check-input" 
onclick="updateRequired();" id="fixed-term" name="term" data-toggle="modal" 
data-target="#dateModal">
         <label class="form-check-label" for="fixed-term">
                Fixed-term
         </label>

         <div class="modal fade" id="dateModal" tabindex="-1" role="dialog" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered" role="document">
               <div class="modal-content">
                     <div class="modal-header">
                          <h4 class="end-date" id="end-date">Pick the end-date</h4>
               </div>
               <div class="modal-body">
                      <label for="expdate">
                              Enter a date of expiration:
                      </label>
                      <input type="date" oninvalid="InvalidTerm(this);" oninput="InvalidTerm(this);" id="expdate" class="form-control" name="expdate" min="2000-01-02" max="2020-01-01">
                       <br>
                       </div>
                       <div class="modal-footer">
                           <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="updateNonRequiredCancel();">Close</button>
                           <button type="button" class="btn btn-primary" onclick="ValidateModal();">Save changes</button>
                       </div>
                   </div>
              </div>
         </div>
    </div>
</fieldset>

And some Javascript I'm using to try and validate 'expdate' while the modal is open which is not working, except for checking if the field is empty (which sets var isFine to true and let's the save button hide the modal):

var isFine = false;
function InvalidTerm(datebox) {
var date = new Date(datebox.value);

if (!isNaN(date.getTime())) {
    datebox.setCustomValidity('Required field!');
}
else if (datebox.validity.rangeOverflow || datebox.validity.rangeUnderflow){
    numberbox.setCustomValidity('Date must be between today and 2020-01- 
01');
}
else {
    datebox.setCustomValidity('');
}
isFine=true;
return true;
}       

function ValidateModal(){
     if (isFine === true) {
          //document.getElementById('expdate').removeAttribute('required'); //questionable
          $('#dateModal').modal('hide');
     }
     else{
          alert('no no');
     }
 }

Any help is appreciated!