Search code examples
javascriptrecaptcha

ReCaptcha implementation still says "please verify that you're not a robot" even if it is checked

I have implemented ReCaptcha into a SweetAlert alert box. Checking the box to confirm I'm not a robot shows the SweetAlert warning to still verify that I am not a robot.

HTML code to launch the SweetAlert

<form id="request_quote" method="POST" action="quoterequest.php">
<input type = hidden id = "...." value = "..."
<button id="quoteButton" class="mt-4 qbutton btn btn-outline-primary" type="submit">Request Print</button>
</form>

Javascript:

<script type="text/javascript">
$(document).ready(function() {
  $("#request_quote").submit(function(e) {
    e.preventDefault();
    Swal.fire({
      title: 'Please enter your email',
      input: 'email',
      inputAttributes: {
        autocapitalize: 'off'
      },
      html: '<div id="recaptcha"></div>',
      didOpen: () => {
        grecaptcha.render('recaptcha', {
          'sitekey': 'SITE_KEY'
        });
      },
      preConfirm: function () {
        if (!grecaptcha.getResponse()) {
        Swal.showValidationMessage(`Please verify that you're not a robot`);
      }
     }
    }).then(function(result) {
      if (result.isConfirmed) {
       ...rest of code

Code updated to reflect Aahan Agarwal response. Problem still persists.

I followed the documentation from the SweetAlert recipe site for adding ReCaptcha onto the alert itself, but something is going wrong with how I implemented it and currently the script is unable to be executed as the alert box still says to verify that I am a human.

Result:

Solution

  • Firstly assuming your HTML code is not having the errors as you've posted in the question. Use this if not:

    <form id="request_quote" method="POST" action="quoterequest.php">
  <input type="hidden" id="...." value="..." />
  <button id="quoteButton" class="mt-4 qbutton btn btn-outline-primary" type="submit">Request Print
  </button>
</form>

    Secondly, I think your preConfirm function is the cause of this. Try changing it to this:

    if (!grecaptcha.getResponse()) {
  Swal.showValidationMessage(`Please verify that you're not a robot`);
}

    You could also do this in the .then() part, it would still work similarly.

    UPDATE:

    $(document).ready(function() {
  $("#request_quote").submit(function(e) {
    e.preventDefault();
    Swal.fire({
      title: 'Please enter your email',
      input: 'email',
      inputAttributes: {
        autocapitalize: 'off'
      },
      html: '<div id="recaptcha"></div>',
      didOpen: () => {
        grecaptcha.render('recaptcha', {
          'sitekey': 'SITE_KEY'
        });
      }
    }).then((result) => {
      if (!result.isConfirmed) {
        Swal.showValidationMessage(`Please verify that you're not a robot`);
      } else {
        // Rest of the code..
      }
    });
  });
});

    Implementation in .then() part, which worked for @couldnteverbeme. JSFiddle link for the same