html 5 validation is not working with google invisible recaptcha

Question

I had a basic Html 5 form working fine earlier but after I added google invisible recaptcha to it. Html5 validation stopped working. I surfed a google lot but couldn't find a way to do that

<script>
function onSubmit(token) {
document.getElementById("send").submit();
}
</script>

<form  id="send" action="process.php" method="post">
<input type="text" required name="Send" minlength="6" maxlength="16" placeholder="stackoverflow">
<button class="btn btn-primary g-recaptcha" data-sitekey="hidden" data-callback='onSubmit'>Submit</button>
</form>

even if the input statements are not fulfilled it disregards that and submits the form without the error message to the user

Answer 1

For recaptcha v3 you can do this. I Fixed with this.

<button 
                                data-sitekey="your key" 
                                data-callback='onSubmit' 
                                data-action='submit' 
                                type="submit" class="g-recaptcha btn btn-block btn-lg btn-primary mt-4">Send your message</button>
                        </div>

update the code in provided google website with this. Basically we are manually checking form validation status before submitting it, if not showing errors.

<script>
        function onSubmit(token) {            
            var applicationForm = document.getElementById("contact-form");    
            if (applicationForm.checkValidity()) {
                document.getElementById("contact-form").submit();                
            } else {
              applicationForm.reportValidity();
            }
                    
        }
    </script>