Required for dynamically created checkbox using JavaScript not working

Question

I have created a checkbox dynamically using vanilla JavaScript. What I am trying to do is, if no element is selected, it should not submit the form.

Dynamically Generated HTML is:

<form>
    <div id="div_drager">
      <div id="cardDiv_1" class="card p-3 my-3">
        <div class="d-flex justify-content-between">
          <label class="question-input-label" placeholder="Question" id="Question_Input_1">please enter your email</label>
        </div>
        <div id="bodyWrapper_1" class="body-wrapper" required>
          <div class="d-flex justify-content-between py-2">
            <div class="d-flex align-item-center w-100" id="cardDiv_1_divCheckbox_0">
              <input id="cardDiv_1_divCheckbox_0_checkbox_0" placeholder="" type="checkbox" name="bodyWrapper_1"><label id="cardDiv_1_divCheckbox_0_checkboxOption_0" class="radio-label-label">Option 1</label>
            </div>
          </div>
          <div class="d-flex justify-content-between py-2">
            <div class="d-flex align-item-center w-100" id="cardDiv_1_divCheckbox_1">
              <input id="cardDiv_1_divCheckbox_1_checkbox_1" placeholder="" type="checkbox" name="bodyWrapper_1"><label id="cardDiv_1_divCheckbox_1_checkboxOption_1" class="radio-label-label">Option 2</label>
            </div>
          </div>
          <div class="d-flex justify-content-between py-2">
            <div class="d-flex align-item-center w-100" id="cardDiv_1_divCheckbox_2">
              <input id="cardDiv_1_divCheckbox_2_checkbox_2" placeholder="" type="checkbox" name="bodyWrapper_1"><label id="cardDiv_1_divCheckbox_2_checkboxOption_2" class="radio-label-label">Option 3</label>
            </div>
          </div>
          <div class="d-flex justify-content-between py-2">
            <div class="d-flex align-item-center w-100" id="bodyWrapper_1_divCheckbox_6">
              <input id="bodyWrapper_1_divCheckbox_6_checkbox_6" placeholder="" type="checkbox" name="bodyWrapper_1"><label id="bodyWrapper_1_divCheckbox_6_checkboxOption_6" class="radio-label-label">Option 6</label>
            </div>
          </div>
        </div>
      </div>
    </div>
    <input type="submit"/>
  </form>

Can anyone help me to identify what went wrong?

Thanks.

Answer 1

Your HTML is ok. There seems to be some issue in your JavaScript validation code you unfortunately did not show.

I recommend as a better approach to enable / disable the button when the form is validated. You can add a delegated change event on the form element. The events raised from the input elements will bubble up to the form.

Here is an example that validates 2 groups of checkboxes. In each group has to be selected at least one.

 (()=> { const myForm1 = document.getElementById('my-form-1'), submit = document.getElementById('my-form-1-submit'), validateMin1SelectedPerGroup = ev => submit.disabled = Array.from(ev.currentTarget.querySelectorAll(':scope fieldset')).reduce( (aggr, fieldset) => aggr || fieldset.querySelectorAll(':scope input[type=checkbox]:checked').length < 1, false ); validateMin1SelectedPerGroup({currentTarget: myForm1}); // initialize myForm1.addEventListener('change', validateMin1SelectedPerGroup); })();

 <form id="my-form-1"> <fieldset> <legend>Group 1:</legend> <div id="div_drager"> <div id="cardDiv_1" class="card p-3 my-3"> <div class="d-flex justify-content-between"> <label title="Tooltip" class="question-input-label" placeholder="Question" id="Question_Input_1">please enter your email</label> </div> <div id="bodyWrapper_1" class="body-wrapper" required> <div class="d-flex justify-content-between py-2"> <div class="d-flex align-item-center w-100" id="cardDiv_1_divCheckbox_0"> <input id="cardDiv_1_divCheckbox_0_checkbox_0" placeholder="" type="checkbox" name="bodyWrapper_1"><label title="Tooltip" id="cardDiv_1_divCheckbox_0_checkboxOption_0" class="radio-label-label">Option 1</label> </div> </div> <div class="d-flex justify-content-between py-2"> <div class="d-flex align-item-center w-100" id="cardDiv_1_divCheckbox_1"> <input id="cardDiv_1_divCheckbox_1_checkbox_1" placeholder="" type="checkbox" name="bodyWrapper_1"><label id="cardDiv_1_divCheckbox_1_checkboxOption_1" class="radio-label-label">Option 2</label> </div> </div> <div class="d-flex justify-content-between py-2"> <div class="d-flex align-item-center w-100" id="cardDiv_1_divCheckbox_2"> <input id="cardDiv_1_divCheckbox_2_checkbox_2" placeholder="" type="checkbox" name="bodyWrapper_1"><label id="cardDiv_1_divCheckbox_2_checkboxOption_2" class="radio-label-label">Option 3</label> </div> </div> <div class="d-flex justify-content-between py-2"> <div class="d-flex align-item-center w-100" id="bodyWrapper_1_divCheckbox_6"> <input id="bodyWrapper_1_divCheckbox_6_checkbox_6" placeholder="" type="checkbox" name="bodyWrapper_1"><label id="bodyWrapper_1_divCheckbox_6_checkboxOption_6" class="radio-label-label">Option 6</label> </div> </div> </div> </div> </div> </fieldset> <fieldset> <legend>Group 2:</legend> <div><input type="checkbox" name="cb_1"><label class="radio-label-label">Option 1</label></div> <div><input type="checkbox" name="cb_2"><label class="radio-label-label">Option 2</label></div> <div><input type="checkbox" name="cb_3"><label class="radio-label-label">Option 3</label></div> </fieldset> <input id="my-form-1-submit" type="submit" /> </form>

Answer 2

So, I removed ids from the following lines in my code and it started working:

<div class="d-flex align-item-center w-100" id="cardDiv_1_divCheckbox_0">
<div class="d-flex align-item-center w-100" id="cardDiv_1_divCheckbox_1">
<div class="d-flex align-item-center w-100" id="cardDiv_1_divCheckbox_2">
<div class="d-flex align-item-center w-100" id="bodyWrapper_1_divCheckbox_6">

But I believe, this is not the solution because having id's may require when you have generated something dynamically.

Following code worked for me but i believe this should not be the right solution.

<form>
    <div id="div_drager">
      <div id="cardDiv_1" class="card p-3 my-3">
        <div class="d-flex justify-content-between">
          <label class="question-input-label" placeholder="Question" id="Question_Input_1">please enter your email</label>
        </div>
        <div id="bodyWrapper_1" class="body-wrapper" >
          <div class="d-flex justify-content-between py-2" >
            <div class="d-flex align-item-center w-100" >
              <input id="cardDiv_1_divCheckbox_0_checkbox_0" placeholder="" type="checkbox" name="bodyWrapper_1" required><label id="cardDiv_1_divCheckbox_0_checkboxOption_0" class="radio-label-label">Option 1</label>
            </div>
          </div>
          <div class="d-flex justify-content-between py-2">
            <div class="d-flex align-item-center w-100">
              <input id="cardDiv_1_divCheckbox_1_checkbox_1" placeholder="" type="checkbox" name="bodyWrapper_1"><label id="cardDiv_1_divCheckbox_1_checkboxOption_1" class="radio-label-label">Option 2</label>
            </div>
          </div>
          <div class="d-flex justify-content-between py-2">
            <div class="d-flex align-item-center w-100" >
              <input id="cardDiv_1_divCheckbox_2_checkbox_2" placeholder="" type="checkbox" name="bodyWrapper_1"><label id="cardDiv_1_divCheckbox_2_checkboxOption_2" class="radio-label-label">Option 3</label>
            </div>
          </div>
          <div class="d-flex justify-content-between py-2">
            <div class="d-flex align-item-center w-100">
              <input id="bodyWrapper_1_divCheckbox_6_checkbox_6" placeholder="" type="checkbox" name="bodyWrapper_1"><label id="bodyWrapper_1_divCheckbox_6_checkboxOption_6" class="radio-label-label">Option 6</label>
            </div>
          </div>
        </div>
      </div>
    </div>
    <input type="submit"/>
  </form>