Enable submit button according to the response of the recaptcha user Vuejs

Question

My goal is that a form button is enabled, if the user correctly responded to the recaptcha, I already found a solution using pure javascript (stackoverflow solution), but I need to do it with VueJs, when using the data-callback attribute of recaptcha, it indicates an error, the which says: "ReCAPTCHA could not find user-provided function: responseRC ()", with which I can not get the answer and activate the button.

My code - HTML

<div id='app'>
  <label for="name">
    <input type="text" name="name" v-model="namex">
  </label>
  <label for="agree">
    <input id="agree" type="checkbox" value="agree" />I Agree</lable>
  <p>
    <hr>
   <div class="g-recaptcha" data-sitekey="6Ld8BDUU0000Edp4MdRqV24fKJe8llSzLfiEQEH" data-callback="responseRC()" ></div>
  <hr>
  <button :name="buttonX" disabled>Button</button>
</div>

Code Vue JS

var ins = new Vue({
      el : '#app',
      data: {
        //checked : false,
        namex: 'Javier',
        buttonX: ''
      },
      mounted: function() {
        this.buttonX.disabled;
        console.log('monta algo');

      },
      beforeupdated: function(){
        console.log('cambia algo');
        this.buttonX.disabled.false;
      },

      methods: {
        disableButton: function(){
            this.buttonX.disabled=false;
        },
        responseRC: function(){
            console.log("The captcha has been already solved");
            if(grecaptcha.getResponse().length !== 0){
               console.log("The captcha has been already solved");
            }
        }

      }
    });

Try changing `data-callback` value to `ins.responseRC()`, so the reCaptcha script can correctly find and call the function (which is inside `ins`, instead of at global scope). Also, shouldn't the function name be passed without the `()`, as specified in the answer you linked? — yuriy636, Nov 12 '17 at 17:29
hello, thanks for the help, but I changed `data-callback = "ins.responseRC"` and the error continues `ReCAPTCHA couldn't find user-provided function: ins.responseRC ` — JavierMD, Nov 12 '17 at 17:49

score 3 · Answer 1 · answered Oct 29 '20 at 15:04

In a nutshell, you have to use @verify, inside the method it'll refer to toggle the boolean flag and include this in the :disabled of a button.

The logic I got (Vuetify/Class API/TypeScript syntax):

in html (the ref you might skip, I'm using this to reset reCAPTCHA on reset button click)

<vue-recaptcha
  @verify="recaptchaVerified"
  ref="recaptcha"
  sitekey="ABC..."
></vue-recaptcha>

:disabled on a button (note the isRecaptchaValid flag)

<v-btn
  :disabled="!isFormValid || !isRecaptchaValid"
  text
  color="purple darken-2"
  type="submit"
  >Send</v-btn
>

TypeScript logic

public isRecaptchaValid: boolean = false;
public recaptchaVerified(response: any): void {
  this.isRecaptchaValid = true;
}

Enable submit button according to the response of the recaptcha user Vuejs

1 Answers1