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）单击开放式时，不再需要'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>

还有一些我用来尝试在模式打开时验证'expdate'的Javascript，这是行不通的，除了检查字段是否为空（它将var 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');
     }
 }

感谢您的帮助！

名称=''的无效表单控件无法通过MODAL

0 个答案: