Recaptcha validation does not work

Question

I need to validate Recaptcha in a form. But, it’s not working.

function validaCaptchaContato() {
  if(document.querySelector('#g-recaptcha-contato').value == '') {
     alert('Marque a opção "Não sou um robô"');
     return false;
  }
}

<form method="post" id="form-contato" onsubmit="return validaCaptchaContato();">
	BLABLABLABLA
	<label>
		<textarea class="fields textarea" name="mensagem" placeholder="Escreva sua mensagem." required></textarea>
	</label>
	<div class="captchaFix">
		<div class="g-recaptcha" data-sitekey="COPIEI CERTO"></div>
	</div>
	<input class="btn-submit" type="submit" name="enviar" id="g-recaptcha-contato" value="Enviar">
</form>

What might be going on?

Answer 1

Lock send button and use attribute data-callback, this way when the user performs the check, the button will be released.

function enableButton() {
  document.querySelector("input[type=\"submit\"]").removeAttribute("disabled");
}

<script src="https://www.google.com/recaptcha/api.js"></script>
<form action="?" method="POST">
  <div class="g-recaptcha" data-sitekey="6LdOQBsTAAAAAHgHKPaN0mjDcEAWbC0f-YgSC65D" data-callback="enableButton"></div>
  <br/>
  <input type="submit" value="Submit" disabled>
</form>

You can also use the method getResponse by clicking the button, this way:

function validation() {
  if (grecaptcha.getResponse() == "") {
    alert("Robôs não podem enviar esse formulário");
    return false;
  }
  return true;
}

<script src="https://www.google.com/recaptcha/api.js"></script>
<form action="?" method="POST" onsubmit="return validation();">
  <div class="g-recaptcha" data-sitekey="6LdOQBsTAAAAAHgHKPaN0mjDcEAWbC0f-YgSC65D" data-callback="enableButton"></div>
  <br/>
  <input type="submit" value="Submit">
</form>