mercredi 29 juin 2016

Ember: Integrating Google Recaptcha with ember-cp-validations

I have a simple contact form, with validation done using ember-cp-validations http://ift.tt/1NRGKRu and I now need to integrate the new Google Recaptcha into that.

For the rendering of the recaptcha, I am using this code - http://ift.tt/294G2Pc - which works perfectly.

However, I don't know how to deal with the verification process to allow the form to be submitted/prevented if the challenge is correct/incorrect or not provided

Here is a truncated version of my contact-form component

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

                 }
               }
           })
        }

     }
});

Here is the template for the component, which includes the rendering of the recpatcha using the gist above

<form >
<div class="row">
<div class="medium-6 columns">

<div class="error-message">

</div>
</div>
</div>

<div class="row">
<div class="medium-12 columns">

</div>
</div>
<button class="button primary" type="submit">Submit</button>
</form>

The Validations import looks like this

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

Many thanks for any help!




Aucun commentaire:

Enregistrer un commentaire