Change CSS display property with javascript if recaptcha not checked in form?

I’m trying to write a javascript function that confirms a user has checked a Google recaptcha V2 box (using django-recaptcha). If they haven’t checked the recaptcha box I’d like to display a piece of text reminding them to check before submitting the form. Here’s what I’ve already tried but the button either submits and refreshes the page, or the hidden div just will not display.

Javascript

function checkForm(){
      
  if(!document.getElementById("g-recaptcha-response").value){
    $('.validate').show();
      return false;
  }else{
    document.getElementById("buttoncontact").type = "submit";                
      return true;
        }
      }

HTML

<div>
  {{form.captcha}}
</div>
<div class="captcha">
  This site is protected by reCAPTCHA and the Google
  <a href="https://policies.google.com/privacy">Privacy Policy</a> and
  <a href="https://policies.google.com/terms">Terms of Service</a> apply.
</div>
<div class="validate" style="display: none;">
  Please validate the captcha field before submitting.
</div>
<div>
  <button id="buttoncontact" type="submit" onclick="return checkForm();">Submit</button>
</div>

I’ve gotten this code to work with the alert function show below, however for user experience I’d much rather not have an alert window to pop up:

function checkForm(){
      
  if(!document.getElementById("g-recaptcha-response").value){
    alert("Please validate the captcha field before submitting.");
      return false;
  }else{
    document.getElementById("buttoncontact").type = "submit";                
      return true;
        }
      }