Google reCAPTCHA with jQuery validation

Question

I am trying to validate google reCAPTCHA with a form if the reCAPTCHA is false it should show a alert and button should goes to false I tried with some code but its not working anyone know?

Here's my code

<div class="lets-talk-out"> </div>
        <div class="slide-popup-box-form-main">
            <div class="slide-popup-box-form">

                <form id="lets-talk-frm" action="contactus.php" method="post" >
                <input type="text"  name="name" id="name" placeholder="Name:" >
                <input type="text"  name="email"  id="email" placeholder="Email:" >
                <input type="text"  name="skype" id="skype" placeholder="Skype" >
                <input type="text"  name="mobile" id="mobile" placeholder="Mobile:" >
                <input type="hidden" name="slider_unlock" value="02" >
                <input type="text"  name="date"   placeholder="Date:" id="ldate" >
                <input type="text"  name="time"  placeholder="Time:" id="ltime" >
                <div class="g-recaptcha" data-sitekey="6Lfc4xETAAAAALO-3I6chqeyOrpfDPRl1u7fW2XD"></div>

                <input type="submit" id="lets-talk" value="submit" name="submit">
                </form>
                </div>

            </div>
<script> 
var k=  jQuery.noConflict();

k(document).ready(function() { 
    var options = { 
        target:        '#lets-talk-out',   // target element(s) to be updated with server response 
    }; 
    k('#ltime').datetimepicker({ 
                        datepicker:false,
                        format:'H:i'
                        });
    k('#ldate').datetimepicker({ 
                        timepicker:false,
                        format: 'Y/m/d',
                         minDate:'-1970/01/01'
                        }); 


    // bind form using 'ajaxForm' 
    k('#lets-talk-frm').ajaxForm({success:function(responseText, statusText, xhr, $form){ 
                                k('.slide-popup-box-form-main').prepend('<h4>'+responseText+'</h4>');
                                k('.slide-popup-box-form').hide();

                                //alert(responseText);
                                //showSlidingDiv();
                                //document.getElementById("lets-talk-out").html(responseText);
                            //  k('#lets-talk-out').html(responseText);
                                },
                                }); 
}); 
     k("#lets-talk-frm").validate({
        rules: {



        name: "required",
        email: {
            required: true,
            email: true
        },

        //skype: "required",
        mobile:{
        required: true,
        digits: true,
         minlength: 7
        },
        date: "required",
        time: "required",



        },
        messages:{
            name: '',
            email: '', skype: '', mobile: '', date: '', time: '', phone: '',
        },




        });






    k( '#slider_full_1' ).sliderCaptcha({
            type: "filled",
            textFeedbackAnimation: 'swipe_overlap',
            hintText: "Swipe to submit",
            width: '300px',
            height: '55px',
            styles: {
                knobColor: "#72ba1c",
                knobColorAfterUnlock: "#000000",
                backgroundColor: "#444",
                textColor: "#fff",
                textColorAfterUnlock: "#fff"
            },
            face: {
                top: 0,
                right: 9,
                icon: 'tisind\images\arrow.png',
                textColor: '#ddd',
                textColorAfterUnlock: '#72ba1c',
                topAfterUnlock: 0,
                rightAfterUnlock: 9,                
                iconAfterUnlock: 'flag'
            },
            events: {
                submitAfterUnlock: 0,
                validateOnServer: 1,
                validateOnServerParamName: "slider_unlock"

            }
        }); 
    var $ = jQuery.noConflict();

</script>

Answer 1

You need to trigger your if statement in an event. It's very easy:

$('form').on('submit', function(e) {
  if(grecaptcha.getResponse() == "") {
    e.preventDefault();
    alert("You can't proceed!");
  } else {
    alert("Thank you");
  }
});

See working example here: JSFiddle

The problem with doing this in JavaScript at all is that the user can easily fake the result if they want to. If you really want to be checking if the user is a robot or not, you should still be comparing the result submitted by the user (via POST) on the server side using your reCAPTCHA secret key.