Ember: Интеграция Google Recaptcha с ember-cp-validations

Question

У меня простая форма контакта, с проверкой, сделанной с использованием ember-cp-validations https://github.com/offirgolan/ember-cp-validations, и теперь мне нужно интегрировать новый Google Recaptcha в это.

Для визуализации recaptcha, я использую этот код - https://gist.github.com/cravindra/5beeb0098dda657433ed - который отлично работает.

Однако, я не знаю, как иметь дело с процессом проверки, чтобы форма должны быть представлены/предотвращены, если задача правильно/неправильно или не предусмотрено

Вот укороченная версия моего контактно форма компонент

import Ember from 'ember'; 
import Validations from './cp-validations/contact-form'; 
import config from '../config/environment'; 

export default Ember.Component.extend(Validations,{ 
    data:{}, 
    nameMessage:null, 
    init() { 
     this._super(...arguments); 
     this.set('data',{}); 
    }, 
    actions:{ 
     submitForm() { 

      this.validate().then(({model,validations}) => { 
       if (validations.get('isValid')) { 
        // submit form 
       } 
       else { 
        if(model.get('validations.attrs.data.name.isInvalid')){ 
       this.set('nameMessage',model.get('validations.attrs.data.name.messages')); 

       } 
       } 
      }) 
     } 

    } 
}); 

Здесь шаблон для компонента, который включает в себя рендеринг с использованием recpatcha сути выше

<form {{action 'submitForm' on='submit'}}> 
<div class="row"> 
<div class="medium-6 columns"> 
{{input type="text" value=data.name id="name" placeholder="Enter your name"}} 
<div class="error-message"> 
{{nameMessage}} 
</div> 
</div> 
</div> 

<div class="row"> 
<div class="medium-12 columns"> 
{{google-recaptcha}} 
</div> 
</div> 
<button class="button primary" type="submit">Submit</button> 
</form> 

Импорт валидаций выглядит следующим образом:

import { validator, buildValidations } from 'ember-cp-validations'; 
export default buildValidations({ 
'data.name': { 
    validators: [ 
     validator('presence',{ 
     presence:true, 
     message:'Please enter your name' 
     }) 
    ] 
    }, 
}); 

Большое спасибо за помощь!

Answer 1

Регистрация captchaComplete в вашем google-recaptcha компонента и смешать ответ с вашим валидаций

UPDATE

контакт-form.hbs

<form {{action 'submitForm' on='submit'}}> 
<div class="row"> 
<div class="medium-6 columns"> 
{{input type="text" value=data.name id="name" placeholder="Enter your name"}} 
<div class="error-message"> 
{{nameMessage}} 
</div> 
</div> 
</div> 

<div class="row"> 
<div class="medium-12 columns"> 
{{google-recaptcha captchaComplete=validateRecatcha}} 
</div> 
</div> 
<button class="button primary" type="submit">Submit</button> 
</form> 

контакт-form.js

import Ember from 'ember'; 
import Validations from './cp-validations/contact-form'; 
import config from '../config/environment'; 

export default Ember.Component.extend(Validations,{ 
    data:{}, 
    nameMessage:null, 
    captchaValidated: false, 
    init() { 
     this._super(...arguments); 
     this.set('data',{}); 
    }, 
    actions:{ 
     validateRecatcha(data){ 
      //if data denotes captcha is verified set captchaValidated to true else false 
     }, 
     submitForm() { 

      this.validate().then(({model,validations}) => { 
       if (validations.get('isValid') && this.get('captchaValidated')) { 
        // submit form 
       } 
       else { 
        if(model.get('validations.attrs.data.name.isInvalid')){ 
       this.set('nameMessage',model.get('validations.attrs.data.name.messages')); 

       } 
       } 
      }) 
     } 

    } 
});