title: Validation in React Hook Form to make sure at least one checkbox is checked?
body: <p>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.</p>
  <p>Here is the checkbox section of code within my <code>render</code> function:</p>
  <pre><code>{/* Checkbox group. User must select at least one medium. */}
  &lt;label&gt;&lt;b&gt;Medium (check all that apply): *&lt;/b&gt;&lt;/label&gt;
  &lt;div&gt;
   &lt;label&gt;
    &lt;input type=&quot;checkbox&quot; name=&quot;medium&quot; value=&quot;Design &amp; Illustration&quot; onChange=&quot;validateMedium();&quot;/&gt;&lt;span&gt;Design &amp; Illustration&lt;/span&gt;
   &lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
   &lt;label&gt;
    &lt;input type=&quot;checkbox&quot; name=&quot;medium&quot; value=&quot;Digital Art&quot; onChange=&quot;validateMedium();&quot;/&gt;&lt;span&gt;Digital Art&lt;/span&gt;
   &lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
   &lt;label&gt;
    &lt;input type=&quot;checkbox&quot; name=&quot;medium&quot; value=&quot;Drawing&quot; onChange=&quot;validateMedium();&quot;/&gt;&lt;span&gt;Drawing&lt;/span&gt;
   &lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
   &lt;label&gt;
    &lt;input type=&quot;checkbox&quot; name=&quot;medium&quot; value=&quot;Painting &amp; Mixed Media&quot; onChange=&quot;validateMedium();&quot;/&gt;&lt;span&gt;Painting &amp; Mixed Media&lt;/span&gt;
   &lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
   &lt;label&gt;
    &lt;input type=&quot;checkbox&quot; name=&quot;medium&quot; value=&quot;Photography&quot; onChange=&quot;validateMedium();&quot;/&gt;&lt;span&gt;Photography&lt;/span&gt;
   &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Here is the function I am trying to write to validate the checkbox group:</p>
  <pre><code>function validateMedium() {
      var mediumCheckboxes = document.getElementsByName(&quot;medium&quot;);
      var okay = false;
  
      for (var i = 0, len = mediumCheckboxes.length; i &lt; len; i++) {
          if (mediumCheckboxes[i].checked) {
              okay = true;
              break;
          }
      }
  
      if (okay) {
          alert(&quot;Thank you&quot;);
      } else {
          alert(&quot;Please check at least one medium.&quot;);
      }
  }
  </code></pre>
  <p>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.</p>