How to clear custom validation error messages after performing a task that would clear them?

I am trying to use a custom validation function to generate an error when at least one checkbox is not checked. I run a black box test by not checking any of the check boxes, and then submitting the form. The error message appears as intended. However, when I go into select a checkbox and re-submit, the error message still appears. How can I clear the error message once the correct option has been performed? I am using ReactJS. Here is my JavaScript code:

Custom validation function:

function validateForm() {
    {/* Custom validation for medium checkbox group. */}
    var mediumCheckboxes = document.getElementsByName("medium");
    var validMedium = false;

    for (var i = 0, len = mediumCheckboxes.length; i < len; i++) {
        if (mediumCheckboxes[i].checked) {
            validMedium = true;
            break;
        }
    }
    if (!validMedium) {
        document.getElementById('error-message-checkbox').innerHTML = "Please check at least one medium.";
    } 
}

HTML in render function:

{/* Checkbox group. User must select at least one medium. */}
<label className="text main"><b>Medium (check all that apply): *</b></label><span id="error-message-checkbox" className="error"></span>
<div>
 <label>
  <input className="checkbox" type="checkbox" name="medium" ref={register({validate: validateForm})}/><span>Design & Illustration</span>
 </label>
</div>
<div>
 <label>
  <input className="checkbox" type="checkbox" name="medium" ref={register({validate: validateForm})}/><span>Digital Art</span>
 </label>
</div>
<div>
 <label>
  <input className="checkbox" type="checkbox" name="medium" ref={register({validate: validateForm})}/><span>Drawing</span>
 </label>
</div>

Is there a way to reset the error messages every time I submit the form?