title: I want a hidden field to be required but when selecting another option this required hidden field is disabled, how?
body: <p>I have a field called <strong>collection type</strong> and I have 4 options where each corresponds to a different hidden field which are <strong>&quot;Ad Hoc&quot;, &quot;Daily&quot;, &quot;Weekly&quot;, &quot;Monthly&quot;</strong>. These 4 different options will display different hidden input fields</p>
  <p>So &quot;Weekly&quot; is the checkbox I would like to be required but as I have this input field as required when I select another option for collection type and press done button I will get an error like</p>
  <pre><code>An invalid form control with name='monday' is not focusable.
  </code></pre>
  <p>How can I fix this? Sorry my form is pretty massive</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>if ($("#select-Collection-Type").val() === "Ad Hoc") {
    $('.change-date-collection').removeAttr('hidden');
  } else {
    $('.change-date-collection').attr('hidden', '');
  } // Make the Hide appear when select the correct value for the 3 option if($("#select-Collection-Type").val()
  ===
  "Daily" | $("#select-Collection-Type").val() === "Monthly" | $("#select-Collection-Type").val() === "Weekly") {
    $('.change-date-collection1').removeAttr('hidden');
  } else {
    $('.change-date-collection1').attr('hidden', '');
  } // this is for Weekly if($("#select-Collection-Type").val()
  ===
  "Weekly") {
    $('.position').removeAttr('hidden');
  } else {
    $('.position').attr('hidden', '');
  } // this is for Monthly if($("#select-Collection-Type").val() === "Monthly"){ $('.position1').removeAttr('hidden'); } else{ $('.position1').attr('hidden',
  '');
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-4"&gt;
    &lt;label for="select-Collection-Type" class="col-form-label"&gt;Collection
                                                           Type&lt;/label&gt;
    &lt;/br&gt;
    &lt;select oninvalid="this.setCustomValidity('Please select a valid Collection Type.')" oninput="this.setCustomValidity('')" class="select-Collection-Type custom-select-sm" id="select-Collection-Type" required&gt;
      &lt;option selected disabled value=""&gt;Select ....&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  
  
  &lt;div class="col-4"&gt;
    &lt;div class="change-date-collection col-12" hidden&gt;
      &lt;label for="Date Collected" class=" col-form-label dateofcollection"&gt;Date of
                                                               collection&lt;/label&gt;
      &lt;input data-role="datepicker" id="change-date-collection" name="date" data-bind="value: selectedDate" style="width: 100%;font-size:.875rem"&gt;
      &lt;span class="k-invalid-msg" data-for="date"&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="change-date-collection1 col-12" hidden&gt;
      &lt;label for="Date Collected" class=" col-form-label dateofcollection"&gt;Date of first
                                                               collection&lt;/label&gt;
      &lt;input data-role="datepicker" id="change-date-collection1" name="date" data-bind="value: selectedDate" style="width: 100%;font-size:.875rem"&gt;
      &lt;span class="k-invalid-msg" data-for="date"&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="col-3"&gt;
    &lt;div class="position" hidden&gt;
      &lt;input class="weeklyInput" type="text" name="weekly" value="0" min="0" max="7" readonly&gt;&lt;label class="textweekly"&gt;times per week&lt;/label&gt;
      &lt;div&gt;
        &lt;div id="box" class="box"&gt;
          &lt;input type="checkbox" class="weekly-day" id="monday" name="monday" value="Monday" oninvalid="this.setCustomValidity('Please select at least one option to proceed')" oninput="this.setCustomValidity('')"&gt;
          &lt;label for="monday"&gt; Monday&lt;/label&gt;&lt;br&gt;
          &lt;input type="checkbox" class="weekly-day" id="tuesday" name="tuesday" value="Tuesday"&gt;
          &lt;label for="tuesday"&gt; Tuesday&lt;/label&gt;&lt;br&gt;
          &lt;input type="checkbox" class="weekly-day" id="wednesday" name="wednesday" value="Wednesday"&gt;
          &lt;label for="wednesday"&gt; Wednesday&lt;/label&gt;&lt;br&gt;
          &lt;input type="checkbox" class="weekly-day" id="thursday" name="thursday" value="Thursday"&gt;
          &lt;label for="thursday"&gt; Thursday&lt;/label&gt;&lt;br&gt;
          &lt;input type="checkbox" class="weekly-day" id="friday" name="friday" value="Friday"&gt;
          &lt;label for="Friday"&gt; Friday&lt;/label&gt;&lt;br&gt;
          &lt;input type="checkbox" class="weekly-day" id="saturday" name="saturday" value="Saturday"&gt;
          &lt;label for="saturday"&gt; Saturday&lt;/label&gt;&lt;br&gt;
          &lt;input type="checkbox" class="weekly-day" id="sunday" name="sunday" value="Sunday"&gt;
          &lt;label for="Sunday"&gt; Sunday&lt;/label&gt;&lt;br&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="position1" hidden&gt;
      &lt;input class="monthlyInput" id="start-day" name="monthly" type="number" value="1" min="1" max="28"&gt;
      &lt;label class="monthlyInputStyle"&gt;-&lt;/label&gt;
      &lt;input id="end-day" class="monthlyInput" name="monthly" type="number" value="1" min="1" max="28"&gt;
      &lt;label class="monthlyInputStyle"&gt;day of the month&lt;/label&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>