Using TypeScript to effectively validate form checkboxes for input fields

Question

Using TypeScript to effectively validate form checkboxes for input fields

I've created a form that includes multiple checkboxes with 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&") ; initCheckBox(this.id);transaktionObj.inputEnable(this.checked,&quot;Gleitzeitmaxstunden&");}">
        <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));}}"...

Whenever a checkbox is ticked and the user inputs a value in the corresponding field, the TS method should confirm as 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;

However, the condition $JQ(#${inputId}).val() !== "" always results in true. I would appreciate any assistance provided.

javascript jquery typescript validation

Answer 1

Answer №1

When a checkbox is altered, the input element's required property will be toggled between true and false.

The form submission will only occur if all mandatory fields are valid - for instance, containing any value. To specify more specific requirements, attributes like pattern, minlength, or maxlength can be utilized for text inputs (

<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>

Answer 2

When a checkbox is altered, the input element's required property will be toggled between true and false.

The form submission will only occur if all mandatory fields are valid - for instance, containing any value. To specify more specific requirements, attributes like pattern, minlength, or maxlength can be utilized for text inputs (

<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>

Answer 3

Answer №2

When working with JavaScript, it is important to remember to evaluate the checked attribute instead of the value attribute when dealing with checkbox inputs.

This means that you should use the following code:

document.getElementById(inputId).checked;

If you are using jQuery, the equivalent code would be:

$(`#${inputId}`).is(":checked");

Answer 4

When working with JavaScript, it is important to remember to evaluate the checked attribute instead of the value attribute when dealing with checkbox inputs.

This means that you should use the following code:

document.getElementById(inputId).checked;

If you are using jQuery, the equivalent code would be:

$(`#${inputId}`).is(":checked");

Using TypeScript to effectively validate form checkboxes for input fields

Answer №1

Answer №2

Similar questions

Tips for troubleshooting JSONP AJAX events

Issue: appbridgeError: APP::ERROR::INVALID_CONFIG: shopOrigin is a required field and must be provided

What purpose does Webpack serve in injecting React?

Stop touchCancel during scrollStart action

How can you personalize the background color of a Material-UI tooltip?

Using Driver Wait Until Text in Selenium involves waiting for a specific text to appear on a

I am looking to use jQuery to update certain elements on the Cart details page to give it

The `findOne` operation in Mongoose fails to complete within the 10000ms time limit

Can NgFor accept dynamic keys as variables?

Using 'require' within a nested directive that relies on the parent directive in AngularJS

What is the best way to transfer a file from the "src" directory to the "public" directory in JavaScript?

Implementing two-dimensional orientation on particles in three.js

Is left padding appearing mysteriously (supernatural CSS phenomenon)?

Are there specific files or classes that store constants for different keyboard events?

Execute the second method once the first method has completed its execution

Tips for utilizing JSON and ajax smoothly without encountering any errors

What are the steps to developing a unique JavaScript function?

Encountering issue with jQuery - Ajax causing error 500 for select posts

MUI provides the flexibility to adjust the opacity separately for Chip labels/icons and backgrounds

Sometimes, the submission of a form using jQuery/Ajax only seems to be successful every second attempt