Required for dynamically created checkbox using JavaScript not working-CodePudding

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" >
        <div >
          <label  placeholder="Question" id="Question_Input_1">please enter your email</label>
        </div>
        <div id="bodyWrapper_1"  required>
          <div >
            <div  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" >Option 1</label>
            </div>
          </div>
          <div >
            <div  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" >Option 2</label>
            </div>
          </div>
          <div >
            <div  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" >Option 3</label>
            </div>
          </div>
          <div >
            <div  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" >Option 6</label>
            </div>
          </div>
        </div>
      </div>
    </div>
    <input type="submit"/>
  </form>

Can anyone help me to identify what went wrong?

Thanks.

CodePudding user response：

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" >
        <div >
          <label title="Tooltip"  placeholder="Question" id="Question_Input_1">please enter your email</label>
        </div>
        <div id="bodyWrapper_1"  required>
          <div >
            <div  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" >Option 1</label>
            </div>
          </div>
          <div >
            <div  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" >Option 2</label>
            </div>
          </div>
          <div >
            <div  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" >Option 3</label>
            </div>
          </div>
          <div >
            <div  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" >Option 6</label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
  <fieldset>
    <legend>Group 2:</legend>
    <div><input type="checkbox" name="cb_1"><label >Option 1</label></div>
    <div><input type="checkbox" name="cb_2"><label >Option 2</label></div>
    <div><input type="checkbox" name="cb_3"><label >Option 3</label></div>
  </fieldset>
  <input id="my-form-1-submit" type="submit" />
</form>

CodePudding user response：

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

<div  id="cardDiv_1_divCheckbox_0">
<div  id="cardDiv_1_divCheckbox_1">
<div  id="cardDiv_1_divCheckbox_2">
<div  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" >
        <div >
          <label  placeholder="Question" id="Question_Input_1">please enter your email</label>
        </div>
        <div id="bodyWrapper_1"  >
          <div  >
            <div  >
              <input id="cardDiv_1_divCheckbox_0_checkbox_0" placeholder="" type="checkbox" name="bodyWrapper_1" required><label id="cardDiv_1_divCheckbox_0_checkboxOption_0" >Option 1</label>
            </div>
          </div>
          <div >
            <div >
              <input id="cardDiv_1_divCheckbox_1_checkbox_1" placeholder="" type="checkbox" name="bodyWrapper_1"><label id="cardDiv_1_divCheckbox_1_checkboxOption_1" >Option 2</label>
            </div>
          </div>
          <div >
            <div  >
              <input id="cardDiv_1_divCheckbox_2_checkbox_2" placeholder="" type="checkbox" name="bodyWrapper_1"><label id="cardDiv_1_divCheckbox_2_checkboxOption_2" >Option 3</label>
            </div>
          </div>
          <div >
            <div >
              <input id="bodyWrapper_1_divCheckbox_6_checkbox_6" placeholder="" type="checkbox" name="bodyWrapper_1"><label id="bodyWrapper_1_divCheckbox_6_checkboxOption_6" >Option 6</label>
            </div>
          </div>
        </div>
      </div>
    </div>
    <input type="submit"/>
  </form>