cploutarchou
2/5/2020 - 3:28 PM

#### GOOGLE recaptcha setup

GOOGLE recaptcha setup

  
 ####  GOOGLE recaptcha setup 
  ** **
   * Add Sctipt Url on Head Section 
  ```javascript
  <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
 <script src="https://www.google.com/recaptcha/api.js" async defer></script>
   ```
  * Create a div for recaptcha display 

  ```javascript
  <div class="g-recaptcha" data-sitekey="sitekey" id="rcaptcha" ></div>
  ```
   * Add another div for error message display
     ```javascript  
           <div id="recaptcha-error">
            <span  style="margin-left:100px;color:red;font-weight: bolder;"></span>
            </div>
            ```

* Add callback script call on footer
 ```javascript 
         <script src="https://www.google.com/recaptcha/api.js?&render=explicit" async defer></script>   
```
* Create JS validation Function
     ```javascript 
    <script>
    $("#log1").validate({
        submitHandler: function (form) {
            var response = grecaptcha.getResponse();
            //recaptcha failed validation
            if (response.length == 0) {
                $('#recaptcha-error').show();
                $("#recaptcha-error span").text("Captcha is not Valid");
                return false;
            }
            //recaptcha passed validation
            else {
                $('#recaptcha-error').hide();
                return true;
            }
        }
    });
</script>