html validation not working with recaptcha html jquery
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<form id="myForm">
Name: (required) <input id="field" name="field" required>
<div id='recaptcha' class="g-recaptcha"
data-sitekey="your_site_key"
data-callback="onCompleted"
data-size="invisible"></div>
<input type="submit" value="submit" />
</form>
<script>
$('#myForm').submit(function(event) {
console.log('form submitted.');
if (!grecaptcha.getResponse()) {
console.log('captcha not yet completed.');
event.preventDefault(); //prevent form submit
grecaptcha.execute();
} else {
console.log('form really submitted.');
}
});
onCompleted = function() {
console.log('captcha completed.');
$('#myForm').submit();
alert('wait to check for "captcha completed" in the console.');
}
</script>