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，并将答案与您的验证混合

<强>更新

接触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'));

                 }
               }
           })
        }

     }
});

Ember：将Google Recaptcha与ember-cp-validations集成

1 个答案: