Изменить свойство CSS display с помощью javascript, если recaptcha не отмечена в форме?

Я пытаюсь написать функцию javascript, которая подтверждает, что пользователь поставил галочку в поле Google recaptcha V2 (используя django-recaptcha). Если пользователь не проверил флажок recaptcha, я хотел бы вывести на экран текст, напоминающий ему о необходимости проверки перед отправкой формы. Вот что я уже пробовал, но кнопка либо отправляется и обновляет страницу, либо скрытый div просто не отображается.

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>

Я заставил этот код работать с функцией оповещения, показанной ниже, однако для удобства пользователя я бы предпочел, чтобы окно оповещения не появлялось:

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;
        }
      }

Вернуться на верх