TypeScript: How to validate input fields with form checkboxes

Question

I have a form with several checkboxes and corresponding input fields.

<div class="group-wrap input-element" id="gr_">
  <div class="label-bar">
    <label>
      <div class="custom-control form-check">
        <input class="form-check-input" value="1" type="checkbox" id="Gleitzeitmaxstundenenable" name="Gleitzeitmaxstundenenable" onmouseup="{setActFeld(this.id);}" onfocus="{ setActFeld(this.id);}" onclick="{setConfirmedChange(this.id, &quot;false&quot;) ; initCheckBox(this.id);transaktionObj.inputEnable(this.checked,&quot;Gleitzeitmaxstunden&quot;);}">
        <label class="form-check-label" for="Gleitzeitmaxstundenenable">Gleitzeit max.</label>
      </div>
    </label>
  </div>
  <input placeholder="Gleitzeitmaxstunden" name="Gleitzeitmaxstunden" class="form-control text-truncate input-sm zeit-raum withSign numValPicker timecount disabled" data-syntax="-NNN:NN" value="" data-prefix="true" id="Gleitzeitmaxstunden" maxlength="7" type="text" onmousedown="{ if(checkPickerVoll(this.id)){ return false;}else{return (updateZeitMitSign(this,4, false));}}" onkeyup="{  if(checkPicker(this.id)){ return false;} else{return (updateZeitMitSign(this,4, true));}}" onfocus="{ setActFeld(this.id);}" onkeydown="{ if(checkPickerVoll(this.id)){ return false;}else{return (updateZeitMitSign(this,4, false));}}" onmouseup="{ if(checkPickerVoll(this.id)){ return false;}else{return (updateZeitMitSign(this,4, false));}}" onkeypress="{ if(checkPickerVoll(this.id)){ return false;}else{return (updateZeitMitSign(this,4, false));}}" onchange="{ if(checkPickerVoll(this.id)){setConfirmedChange(this.id, &quot;false&quot;); return false;}else{setConfirmedChange(this.id, &quot;false&quot;);}}" onblur="{ if(checkPickerVoll(this.id)){ return false;}else{scanValueAufHtml(this.id);convertZeitGt23(this.id,this.value,3,999);}}" onclick="{ if(checkPickerVoll(this.id)){ return false;}else{openNumpadV3(&quot;toggle§Gleitzeitmaxstunden&quot;, event);return (updateZeitMitSign(this,4, false));}}"
  ></div>
</div>

When a checkbox is checked and the user enters a value in the corresponding input field then the TS method should return true.

        let fehler = false;
        $JQ("input.form-check-input").each(function(ind: number, checkBox: Element){
            const checkbox = $JQ(checkBox);
            const inputId = checkbox.attr("id").replace("enable", "");
            
            if($JQ(`#${inputId}`).val() !== ""){
                fehler = true;
            }
        });
       
        return fehler;

But $JQ(#${inputId}).val() !== "" always gives true. Kindly, help me.

Answer 1

If a checkbox is changed set the required property on the input element to true or false.

The form will only submit if all required form fields are valid -- in this example -- has any value. You can require something more specific by using attributes like pattern, minlength or maxlength for text input (<input type="text">).

document.forms.form01.addEventListener('input', e => {
  let form = e.target.form;
  let elm = e.target;
  
  switch(elm.type){
    case 'checkbox':
      form[elm.dataset.name].required = elm.checked;
      break;
  }
});

document.forms.form01.addEventListener('submit', e => {
  e.preventDefault();
  console.log('submitting');
});

fieldset {
  border: none;
}

<form name="form01">
  <fieldset>
    <label><input type="checkbox" data-name="text01"></label>
    <label>Text 01: <input type="text" name="text01"></label>
  </fieldset>
  <fieldset>
    <label><input type="checkbox" data-name="text02"></label>
    <label>Text 02: <input type="text" name="text02"></label>
  </fieldset>
  <fieldset>
    <label><input type="checkbox" data-name="text03"></label>
    <label>Text 03: <input type="text" name="text03"></label>
  </fieldset>
  <button type="submit">Submit</button>
</form>