I am working on a form in which I have a section of it that needs to have at least one of the checkboxes checked. I am using ReactJS and a React Hook Form.

Here is the checkbox section of code within my render function:

{/* Checkbox group. User must select at least one medium. */}
<label><b>Medium (check all that apply): *</b></label>
<div>
 <label>
  <input type="checkbox" name="medium" value="Design & Illustration" onChange="validateMedium();"/><span>Design & Illustration</span>
 </label>
</div>
<div>
 <label>
  <input type="checkbox" name="medium" value="Digital Art" onChange="validateMedium();"/><span>Digital Art</span>
 </label>
</div>
<div>
 <label>
  <input type="checkbox" name="medium" value="Drawing" onChange="validateMedium();"/><span>Drawing</span>
 </label>
</div>
<div>
 <label>
  <input type="checkbox" name="medium" value="Painting & Mixed Media" onChange="validateMedium();"/><span>Painting & Mixed Media</span>
 </label>
</div>
<div>
 <label>
  <input type="checkbox" name="medium" value="Photography" onChange="validateMedium();"/><span>Photography</span>
 </label>
</div>

Here is the function I am trying to write to validate the checkbox group:

function validateMedium() {
    var mediumCheckboxes = document.getElementsByName("medium");
    var okay = false;

    for (var i = 0, len = mediumCheckboxes.length; i < len; i++) {
        if (mediumCheckboxes[i].checked) {
            okay = true;
            break;
        }
    }

    if (okay) {
        alert("Thank you");
    } else {
        alert("Please check at least one medium.");
    }
}

How do I integrate the validation function I've written specifically for the checkbox group on this form? If the user does not check at least one checkbox when the submit button is clicked, I would like the error to appear. I do not want to use jQuery.

I am working on a form in which I have a section of it that needs to have at least one of the checkboxes checked. I am using ReactJS and a React Hook Form.

Here is the checkbox section of code within my render function:

{/* Checkbox group. User must select at least one medium. */}
<label><b>Medium (check all that apply): *</b></label>
<div>
 <label>
  <input type="checkbox" name="medium" value="Design & Illustration" onChange="validateMedium();"/><span>Design & Illustration</span>
 </label>
</div>
<div>
 <label>
  <input type="checkbox" name="medium" value="Digital Art" onChange="validateMedium();"/><span>Digital Art</span>
 </label>
</div>
<div>
 <label>
  <input type="checkbox" name="medium" value="Drawing" onChange="validateMedium();"/><span>Drawing</span>
 </label>
</div>
<div>
 <label>
  <input type="checkbox" name="medium" value="Painting & Mixed Media" onChange="validateMedium();"/><span>Painting & Mixed Media</span>
 </label>
</div>
<div>
 <label>
  <input type="checkbox" name="medium" value="Photography" onChange="validateMedium();"/><span>Photography</span>
 </label>
</div>

Here is the function I am trying to write to validate the checkbox group:

function validateMedium() {
    var mediumCheckboxes = document.getElementsByName("medium");
    var okay = false;

    for (var i = 0, len = mediumCheckboxes.length; i < len; i++) {
        if (mediumCheckboxes[i].checked) {
            okay = true;
            break;
        }
    }

    if (okay) {
        alert("Thank you");
    } else {
        alert("Please check at least one medium.");
    }
}

How do I integrate the validation function I've written specifically for the checkbox group on this form? If the user does not check at least one checkbox when the submit button is clicked, I would like the error to appear. I do not want to use jQuery.

• javascript
• reactjs
• validation
• checkbox
• react-hook-form

Share Improve this question Follow asked Aug 8, 2020 at 16:44 greendaysbombgreendaysbomb 40422 gold badges88 silver badges2828 bronze badges 1

• Look into controlled ponents in react – Anurag Srivastava Commented Aug 8, 2020 at 16:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Each of your inputs should have a ref prop which would register the validation function:

  ref={register({
    required: false,
    validate: validateMedium })}

Revisiting this, 2023

Each of your checkbox inputs would need to be registered* with react-hook-form, something like this...

<input
  type="checkbox"
  value="Photography" 
  {...register("medium", {
     validate: atLeastOneMediumChecked,
  })}
/>
// etc..
<input
  type="checkbox"
  value="Drawing" 
  {...register("medium", {
     validate: atLeastOneMediumChecked,
  })}
/>

and then, you'll need that validation function defined...

// validation, at least one medium checkbox needs to be ticked
function atLeastOneMediumChecked(selectedMediums: string[]) {
  return selectedMediums.length > 0;
}

which would enable you to check for errors on form submission and place this somewhere on the page (assuming you want to alert the user)

{errors.medium && (
  <span>
    At least one medium selection is required
  </span>
)}

* technically, you only actually need that validation function registered with one of the checkbox inputs in the group since RHF only needs to run once - i.e. the function checks the array holding all values checked in the group