CODEWITHSUNDEEP
javascriptphpjqueryvalidationrecaptcha
o'Bass
o'Bass

Reputation: 159

reCaptcha / Form Validation

Hello, I want to import reCaptcha(2) to my Register form. I have already imported, but their don't validate it. On submit click, skip's empty reCaptcha and ignores it. Can someone post full HTML & JAVA/SCRIPT code's(without using php). I can't find the right code. I want to have a full html/script code. :x

I tried this, but I need a <script> code to validate it. I searched for a code, tried some scripts, but it can't validate the <form>.

<html>
<head>
<title>TEST</title>
 <script src='https://www.google.com/recaptcha/api.js?hl=en'></script>
</head>
<body>
<form method="POST" action="register.html">
<input type="text" name="name" required>
<br>
<input type="email" name="email" required>
<br>
<input type="password" name="password" required>
<br>
 <center><div class="g-recaptcha" data-theme="dark" data-sitekey="MY_SITE_KEY"></div></center><br>
<br>
<input type="submit" value="submit">
</body>
</html>

Thanks.

Upvotes: 0

Views: 2889

Answers (1)

Rajdeep Paul
Rajdeep Paul

Reputation: 16963

Since you have to do server-side captcha validation, hence your action part of the form should be register.php, not register.html. Your HTML code should be like this:

<form method="POST" action="register.php">
    <input type="text" name="name" required><br />
    <input type="email" name="email" required><br />
    <input type="password" name="password" required><br />
    <center>
        <div class="g-recaptcha" data-theme="dark" data-sitekey="YOUR_SITE_KEY"></div>
    </center><br />
    <input type="submit" name="submit" value="submit">
</form>

And this is how you can validate the input captcha in register.php file,

<?php

    if(isset($_POST['submit'])){

        //your site secret key
        $secret = 'XXXXXXX_Secret-key_XXXXXXX';

        if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])){
            //get verified response data
            $param = "https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response=".$_POST['g-recaptcha-response'];
            $verifyResponse = file_get_contents($param);
            $responseData = json_decode($verifyResponse);

            if($responseData->success){
                // success
                echo "success";
            }else{
                // failure
            }

        }

    }

?>

Here are the references:

Edited:

From your comment,

2x borders on side of . for example then i get a error, it add's a style(border-left:1px solid red;border-right:1px solid red;) or it add's a class(recaptcha-error). When success shows only the reCaptcha green mark withuot a border.

Here's the solution,

Your stylesheet should be like this:

<style>
    .error {
        border:5px solid red;
    }
    .success{
        border:5px solid blue;
    }
</style>

Your HTML will be as it is, and your jQuery should be like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('[name="submit"]').click(function(e){
            var recaptchaResponse = grecaptcha.getResponse();

            if(recaptchaResponse == ""){
                $(".g-recaptcha").addClass("error");
            }else{
                $(".g-recaptcha").addClass("success");
            }

        });
    }); 
</script>

Upvotes: 1

Related Questions