CODEWITHSUNDEEP
javascriptrecaptcha
nsic
nsic

Reputation: 153

Google recaptcha required for form submission

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>

Upvotes: 2

Views: 9031

Answers (3)

Muhammad
Muhammad

Reputation: 349

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.

Upvotes: 4

Excellent Lawrence
Excellent Lawrence

Reputation: 1104

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

Upvotes: 2

SDillon
SDillon

Reputation: 127

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.

Upvotes: 0

Related Questions