How to make a reCAPTCHA required?

Question

I'm making a form, I'm using AJAX to send it, but I also have a google reCAPTCHA in it and I don't know how to make it required.

I don't want to send the form without checked reCAPTCHA and if it's not checked then I want to show the information about this. I tried lots of things but I still don't know what's wrong.

My HTML code:

        <div class="form">
        <div id="form-messages"></div>
       <form id="formularz" method="post" action="mailer.php">
            <div class="line">
             <input id="name" name="name" type="text" placeholder="Imię"/>
             <input id="email" name="email" type="email" placeholder="E-mail" required/>
            </div>
            <div class="line2">
           <input id="temat" name="temat" type="text" placeholder="Temat" />
           <textarea id="wiadomosc" name="message" placeholder="Wiadomość" required></textarea>
            </div>
            <div class="line3">
           <div class="g-recaptcha captcha" data-sitekey="6Lcu9xgUAAAAAPbwLwKWILHGxu-X0cPjAhRtYM2R"></div>
           <input id="submit" name="submit" type="submit" value="Wyślij">
              <div style="clear:both;"></div>
            </div>
       </form>
     </div>

My js code:

$(function() {
 var form = $('#formularz');
  var formMessages = $('#form-messages');

 $(form).submit(function(e) {
  e.preventDefault();

  var formData = $(form).serialize();

  $.ajax({
   type: 'POST',
   url: $(form).attr('action'),
   data: formData
  })
  .done(function() {
   $(formMessages).removeClass('error');
   $(formMessages).addClass('success');

      $(formMessages).text('Dziękujemy, wiadomość została wysłana.');

   $('#name').val('');
   $('#email').val('');
   $('#temat').val('');
   $('#wiadomosc').val('');
  })
  .fail(function() {
   $(formMessages).removeClass('success');
   $(formMessages).addClass('error');

   $(formMessages).text('Oops! Wiadomość nie mogła zostać wysłana.');
  });
 });
});

And PHP code:

if ($_SERVER["REQUEST_METHOD"] == "POST") {
        $name = strip_tags(trim($_POST["name"]));
    $name = str_replace(array("\r","\n"),array(" "," "),$name);
        $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
        $message = trim($_POST["message"]);

        $recipient = "karol_guzikowski@wp.pl";

        $subject = "Nowa wiadomość od $name";

        $email_content = "Od: $name\n";
        $email_content .= "Email: $email\n\n";
        $email_content .= "Wiadomość:\n$message\n";

        $email_headers = "Od: $name <$email>";

  $wszystko_OK=true;

  $sekret = "6Lcu9xgUAAAAAPbwLwKWILHGxu-X0cPjAhRtYM2R";

  $sprawdz = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$sekret.'&response='.$_POST['g-recaptcha-response']);

  $odpowiedz = json_decode($sprawdz);

  if (!$odpowiedz->success){
   $wszystko_OK=false;
   http_response_code(600);
   echo "Proszę zaznaczyć reCAPTCHE";
  }

  if($wszystko_OK==true){
   mail($recipient, $subject, $email_content, $email_headers);
  }
}

Possible duplicate of [How can I make reCAPTCHA a required field?](http://stackoverflow.com/questions/27706594/how-can-i-make-recaptcha-a-required-field) — Dan Wilson, Mar 20 '17 at 16:04
@Karol, check this topic, it might be helpful - http://stackoverflow.com/questions/29612879/google-recaptcha-how-to-make-required/29613089#29613089. — Viktor, Mar 20 '17 at 16:07

score 0 · Answer 1 · answered Mar 20 '17 at 16:38

$(function() {
  var form = $('#formularz');
  var formMessages = $('#form-messages');

  $(form).submit(function(e) {
    e.preventDefault();
    //Recaptcha Validation
    if (!$('#g-recaptcha-response').val().trim().length) {
      alert("Recaptcha is required")
      return false;
    }
    var formData = $(form).serialize();

    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: formData
      })
      .done(function() {
        $(formMessages).removeClass('error');
        $(formMessages).addClass('success');

        $(formMessages).text('Dziękujemy, wiadomość została wysłana.');

        $('#name').val('');
        $('#email').val('');
        $('#temat').val('');
        $('#wiadomosc').val('');
      })
      .fail(function() {
        $(formMessages).removeClass('success');
        $(formMessages).addClass('error');

        $(formMessages).text('Oops! Wiadomość nie mogła zostać wysłana.');
      });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form">
  <div id="form-messages"></div>
  <form id="formularz" method="post" action="mailer.php">
    <div class="line">
      <input id="name" name="name" type="text" placeholder="Imię" />
      <input id="email" name="email" type="email" placeholder="E-mail" required/>
    </div>
    <div class="line2">
      <input id="temat" name="temat" type="text" placeholder="Temat" />
      <textarea id="wiadomosc" name="message" placeholder="Wiadomość" required></textarea>
    </div>
    <div class="line3">
      <div class="g-recaptcha captcha" data-sitekey="6Lcu9xgUAAAAAPbwLwKWILHGxu-X0cPjAhRtYM2R"></div>
      <input id="submit" name="submit" type="submit" value="Wyślij">
      <div style="clear:both;"></div>
    </div>
  </form>
</div>

score 0 · Answer 2 · answered Mar 21 '17 at 06:41

Hope this will work for you.

<form class="p-b-lg" id="enquiry-form" method="post" action="">
    <div class="form-group">
        <input class="form-control form-control-lg" placeholder="Email" name="email1" type="email">
    </div>
    <div class="form-group">
        <input class="form-control form-control-lg" placeholder="Contact Phone" name="number" type="number" required>
    </div>
    <div class="form-group">
        <div class="g-recaptcha" id="rcaptcha" data-sitekey="sitekey goes here"></div>
        <span id="captcha" style="margin-left:100px;color:red" />
    </div>
    <div class="form-group">
        <button class="btn btn-lg btn-secondary-outline team-btn contact-btn" type="submit" name="submit">Send</button>
    </div>
</form>


<?php     
if(isset($_POST['submit'])){
if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])) {
//your site secret key
$secret = 'secret key goes here';
//get verify response data
$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['g-recaptcha-response']);
$responseData = json_decode($verifyResponse);
if($responseData->success) {
$email1 = $_POST['email1'];
$contact_phone = $_POST['contact_phone'];
<?php } 
}
else { ?>
<script>alert("Please fill captcha.");</script>
<?php }
}
?>

How to make a reCAPTCHA required?

2 Answers2