CODEWITHSUNDEEP
javascriptphpjqueryhtmlinvisible-recaptcha
DarkEyeDragon
DarkEyeDragon

Reputation: 330

invisible recaptcha v2 not checking required input fields

I am adding an invisible recaptcha; for some reason, it doesn't check for required fields anymore. Previously, I would get a notification from Chrome stating that the fields can't be empty. Now, it's just ignoring this and letting me submit empty forms.

I am submitting requests using ajax. My guess is that the data-callback is not meant to be used to send ajax requests.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Submit a quote</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/forms.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="../js/quotes/ajax.js"></script>
    <meta name="description" content="Submit your awesome quote today!">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#0aff0a">
    <meta name="msapplication-navbutton-color" content="#0aff0a">
    <meta name="apple-mobile-web-app-status-bar-style" content="#0aff0a">
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
    <div id="status-message"></div>
    <div class="container">
        <form id="form" action="../php/quoteSubmit.php" method="post">
            <h3>Submit your quote</h3>
            <fieldset>
                <textarea rows="20" name="quote" title="quotes" placeholder="Type your quote here...." tabindex="5" required></textarea>
            </fieldset>
            <fieldset>
                <input placeholder="Author" name="author" title="quotes" type="text" tabindex="1" required>
            </fieldset>
            <fieldset>
                <!--<button name="submit" type="submit" id="contact-submit">Submit</button>-->
                <button name="submit" type="submit" id="contact-submit" class="g-recaptcha" data-callback="onSubmit" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI">Submit</button>
            </fieldset>
        </form>
    </div>
    <script>
        function onSubmit(e) {
            //$("#form").submit(function (e) {
                var url = $("#form").attr('action'); // the script where you handle the form input.
                ajaxSendData(url, $("#form").serialize());
            //});
        }
    </script>
</body>
</html>

It seems the submit action is cancelled as well.

$("#form").submit(function (e) {
    var url = $("#form").attr('action');
    ajaxSendData(url, $("#form").serialize());
    e.preventDefault();
});

The above snippet only triggers when not using the recaptcha API.

How would I properly send an ajax request to a PHP page?

My full code (if needed):

<?php
include_once "connect.php";
session_start();
if(isset($_POST["quote"], $_POST["author"], $_POST["g-recaptcha-response"])){
    if(!isValid()){
        http_response_code(400);
        exit();
    }

    $stmt = $conn->prepare("INSERT INTO pending (quote, author) VALUES (?, ?)");
    $stmt->bind_param("ss", $quote, $author);

    $quote = htmlspecialchars($_POST["quote"]);
    $author = htmlspecialchars($_POST["author"]);
    $stmt->execute();

    echo"Added to pending! Thank you for submitting";
    $stmt->close();
    $conn->close();
    //$_SESSION["lastRequest"] = time();
}else{
    http_response_code(400);
    exit();
}
function isValid()
{
    try {
        $url = 'https://www.google.com/recaptcha/api/siteverify';
        $data = ['secret'   => '6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe',
            'response' => $_POST['g-recaptcha-response'],
            'remoteip' => $_SERVER['REMOTE_ADDR']];

        $options = [
            'http' => [
                'header'  => "Content-type: application/x-www-form-urlencoded\r\n",
                'method'  => 'POST',
                'content' => http_build_query($data)
            ]
        ];

        $context  = stream_context_create($options);
        $result = file_get_contents($url, false, $context);
        if($decoded = json_decode($result, true)){
            return $decoded['success'];
        }
    }
    catch (Exception $e) {
        return null;
    }
}

Upvotes: 4

Views: 2422

Answers (1)

awran5
awran5

Reputation: 4546

Try to put the recaptcha in separate div

<div class="g-recaptcha" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"></div>


function onSubmit(e) {
   //$("#form").submit(function (e) {
   var url = $("#form").attr('action'); // the script where you handle the form input.
   ajaxSendData(url, $("#form").serialize());
   //});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>
    
<div id="status-message"></div>
<div class="container">
	<form id="form" action="../php/quoteSubmit.php" method="post">
		<h3>Submit your quote</h3>
		<fieldset>
			<textarea rows="20" name="quote" title="quotes" placeholder="Type your quote here...." tabindex="5" required></textarea>
		</fieldset>
		<fieldset>
			<input placeholder="Author" name="author" title="quotes" type="text" tabindex="1" required>
		</fieldset>
		<fieldset>
			<!--<button name="submit" type="submit" id="contact-submit">Submit</button>-->
      <div class="g-recaptcha" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"></div>
			<button name="submit" type="submit" id="contact-submit" data-callback="onSubmit">Submit</button>
		</fieldset>
	</form>
</div>

Upvotes: 1

Related Questions