Недопустимый элемент управления формы с именем = '' не может быть сфокусирован С МОДАЛЬНЫМ

Question

Редактировать: это не дубликат, потому что я использую проверку HTML5 и обязательный атрибут, а когда ввод скрыт с модальным, требуемый атрибут удаляется из него.У меня он есть только по требованию, когда нажата фиксированная радиокнопка и когда модальное время открыто.При отправке формы она больше не требуется (хотя это может быть неправильным способом ее решения).

/*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');
}

Моя проблема:

Посмотрели некоторыепосты на эту тему, но пока никаких решений не сработало.У меня есть форма со многими данными, которые я пытаюсь проверить.В настоящее время я застрял в проверке входных данных в модале начальной загрузки, поскольку он продолжает выдавать мне ошибку: «Недопустимый элемент управления формы с именем = 'expdate' не может быть сфокусирован».когда я пытаюсь отправить форму.Все остальные входные данные хорошо проверяются за пределами переключателей и модальных.

Модальный режим переключается, когда выбран переключатель «фиксированный», и содержит данные для выбора срока годности.У меня есть некоторые функции onclick для: 1) при нажатии на open-end «expdate» больше не требуется 2) когда выбрана фиксированная дата, «expdate» требуется 3) при нажатии «отмены» внутри модального окна, 'expdate 'больше не требуется, и выбор радиокнопок автоматически переходит в открытое состояние. 4) При нажатии кнопки «Сохранить изменения» я проверяю, является ли поле «expdate» пустым или нет.

Эти функции onclick работают нормально, дляНапример, я не могу сохранить изменения в модале без ввода срока годности.Единственная проблема возникает при попытке отправить всю форму.

<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>

И какой-то Javascript, который я использую, чтобы попытаться проверить 'expdate', пока модал открыт, который не работает, за исключением проверки, если полепусто (что устанавливает переменную isFine в true, а кнопка сохранения скрывает модальный):

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');
     }
 }

Любая помощь приветствуется!