提交表单需要Google Recaptcha

Question

I need help in order to validate our form to be submitted via google recaptcha, I have successfully implemented the code however the form still allows submission without the recaptcha, how do I make it required field? not very good with java script here, any assistance is greatly appreciated also if an error message would pop up so that asking people to complete recaptcha that would be great, thanks a lot

CSS

<script src='https://www.google.com/recaptcha/api.js'></script>

Html

<div class="form">

%form_errors%

<div align="right"><p><strong>* Denotes mandatory field</strong></p></div>


<fieldset>

<legend>Your enquiry details</legend>

<div class="form-row">
%question_label_746942_q7%
%question_field_746942_q7%
</div>

</fieldset>

<div class="g-recaptcha" data-sitekey="google site key"></div>
<div class="form-row-submit" align="right">

%submit_button%
</div>

</div>

Answer 1

You can by default set the submit button to disabled and only enable it on the callback function from reCAPTCHA.

Check this: https://developers.google.com/recaptcha/docs/display

Make sure to validate the form on the server side too.

UPDATE

Add this in your :

<script>
    function enableBtn(){
        document.getElementById("submit_details").disabled = false;
    }
</script>

And then call the above function in the reCAPTCHA div in your form as follows:

<div class="g-recaptcha" data-sitekey="YOUR_KEY" data-callback="enableBtn"></div>
<button type="submit" id="submit_details" disabled>Send</button>

This will have the submit button disabled when the page loads so the user won't be able to submit the form. The button is enabled only after the user passes the "I'm not a robot" test.

Again, remember to validate the form data on the server side.

Answer 2

It should be <button type="submit" id="submit_details" disabled>Send</button>

Not if="submit_details"

The function is using getElementById("submit_details") , so it is looking for an ID of "submit_details" in order to remove the disabled condition of the button by setting disabled = false instead of disabled = true which is the default condition that is set inline in the <button> tag.

Answer 3

<form action="" method="post" onsubmit="return validateRecaptcha();">
</form>

<script>
function validateRecaptcha() {
    var response = grecaptcha.getResponse();
    if (response.length === 0) {
        alert("You need to fill the captcha");
        return false;
    } else {
        alert("validated");
        return true;
    }
}