captcha form validation required error message in vue-recaptcha

Question

I am following this Package in vue.js and Laravel 5.6.7 to implement captcha.

https://github.com/DanSnow/vue-recaptcha#install

Component code in vue.

Answer 1

You can use a property (loginForm.recaptchaVerified below) to track if the recaptcha was verified and prevent submit + display a message if not:

JSFiddle demo: https://jsfiddle.net/acdcjunior/o7aca7sn/3/

Code below:

Vue.component('vue-recaptcha', VueRecaptcha);

new Vue({
  el: '#app',
  data: {
    loginForm: {
      recaptchaVerified: false,
      pleaseTickRecaptchaMessage: ''
    }
  },
  methods: {
    markRecaptchaAsVerified(response) {
      this.loginForm.pleaseTickRecaptchaMessage = '';
      this.loginForm.recaptchaVerified = true;
    },
    checkIfRecaptchaVerified() {
      if (!this.loginForm.recaptchaVerified) {
        this.loginForm.pleaseTickRecaptchaMessage = 'Please tick recaptcha.';
        return true; // prevent form from submitting
      }
      alert('form would be posted!');
    }
  }
})

  

     

        
        
     
     Some other fields of the form here...
     

     Submit form
     

     
{{ loginForm.pleaseTickRecaptchaMessage }}