Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Make checkbox options 1 and option 2 required but make option 3 optional

I have a checkbox with 3 options (option 1, option 2, and option 3). In Javascript, I would like option 1 and option 2 to be required, if either option is selected, then the other is no longer required. Option 3 is always optional. Any ideas?

I’ve tried the following:

    if ($('input[value="0"]', this).is(':checked') ||
    $('input[value="1"]', this).is(':checked')) {
    // everything's fine...
} else {
    this.elem.find('input[value="0"]').prop('required', true);
    this.elem.find('input[value="1"]').prop('required', true);
    this.elem.find('input[value="2"]').prop('required', false);
}

and this (my thought was if nothing is selected then option 1 and 2 is required; ignoring the third option completely):

if ($myCheckbox.length === 0) {
  $myCheckbox.elem.find('input[value="0"]').attr('required', 'required');
  $myCheckbox.elem.find('input[value="1"]').attr('required', 'required');
} else {
  $myCheckbox.elem.find('input[value="0"]').removeAttr('required');
  $myCheckbox.elem.find('input[value="1"]').removeAttr('required');
}

and even something like this based on another dropdown:

    $myCheckbox.elem.find('input[value="0"]').prop('required', $myDropdown.isSelected());
    $myCheckbox.elem.find('input[value="1"]').prop('required', $myDropdown.isSelected());

but nothing works. What happens is that first two options are not being shown as required. Users can still submit my answers without touching the checkbox. Users cannot submit anything until either option 1 or option 2 is selected from a checkbox with 3 options

Tags:

2

Answers


  1. 0

    How about the HTML required attribute?

    function myFunction(){
  document.querySelectorAll("input").forEach(function(element){
    //element.checkValidity();
    element.reportValidity()
  })
}
    <label>
en
<input type=radio name=language required>
</label>
<label>
fr
<input type=radio name=language required>
</label><br>
<input type=checkbox>

<button onclick=myFunction()>check validity</button>
    Login or Signup to reply.
  2. 0

    this is a question about validation

    sample code:

    const
  myForm      = document.querySelector('#my-form')
, errOpts_1  = 'choose one between option 1 or option 2 ( or both )'
  ;
myForm.oninput = e =>
  {
  myForm.option_1.setCustomValidity('');
  console.clear();
  }
myForm.onsubmit = e =>
  {
  console.clear();
  
  if (!myForm.option_1.checked && !myForm.option_2.checked)
    {
    myForm.option_1.setCustomValidity(errOpts_1);
    myForm.option_1.reportValidity();

    e.preventDefault();  // disable submit.
    }

  console.log('the form is valid')
  e.preventDefault();  // only in test disable submit.
  }
    label { display: block; margin: 1em;}
    <form id="my-form" action="#">
  <label> <input type="checkbox" name="option_1" title="required if option 2 is not checked"> option 1 </label>
  <label> <input type="checkbox" name="option_2" title="required if option 1 is not checked"> option 2 </label>
  <label> <input type="checkbox" name="option_3"> option 3 </label>
  <button>submit</button>
  <button type="reset">reset</button>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search