Reputation: 103

Google reCAPTCHA with jQuery validation

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>

Upvotes: 10

Answers (3)

Erdem Guldur

Reputation: 11

Add an invalidHandler to validate

$(document).ready(function() { 
   $('#loginForm').validate({
      errorClass: "my-error-class",
      validClass: "my-valid-class",
      invalidHandler: function(event, validator) {
          grecaptcha.reset();
        },
      rules: {
         phoneNumber: {
         minlength:14,
         maxlength:14,
                required: true
              },
         password: {
           minlength:6,
            maxlength:12,
            required: true
         }
      },
      messages: {
         phoneNumber: {
            required: "Lütfen telefon numaranızı giriniz.",
            maxlength: jQuery.validator.format("Lütfen geçerli telefon numarası giriniz."),
            minlength: jQuery.validator.format("Lütfen geçerli telefon numarası giriniz."),
         },
         password: {
           minlength: jQuery.validator.format("Şifre 6 karakterden kısa olamaz."),
           maxlength: jQuery.validator.format("Şifre 12 karakterden uzun olamaz."),
           required: "Lütfen şifrenizi giriniz",
         }
      }
   });
});

Add A Form Submit Function

function formSubmit(response) {
  $('#loginForm').submit()
  return true 
}

Add Button

<button data-sitekey="<your-site-key>" data-callback="formSubmit"  class="g-recaptcha">Login</button>

Upvotes: 1

Manish Vadher

Reputation: 1546

To check if google recaptcha v2 is checked or not you can do it by the following code :

var checkCaptch = false;
         var verifyCallback = function(response) {
            if (response == "") {
             checkCaptch = false;
         }
         else {
             checkCaptch = true;
         }
         };
         $(document).ready(function() {
             $("#btnSubmit").click(function() {
                 if (checkCaptch && grecaptcha.getResponse()!="") {
                      //Write your success code here
                 }
             });
         })

Upvotes: 0

Chuck Le Butt

Reputation: 48816

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.

Upvotes: 21

Google reCAPTCHA with jQuery validation

Answers (3)

Related Questions