debounced ember-changeset-validations demo

components.edit-user.js

import Ember from 'ember';
import Changeset from 'ember-changeset';
import lookupValidator from 'ember-changeset-validations';

export default Ember.Component.extend({
  init() {
    this._super(...arguments);
    
    let user = Ember.get(this, 'user');
    let validations = Ember.get(this, 'validations');
    
    /*
    	NOTE: It is currently necessary to create the changeset programatically through Javascript until the following PR is merged: https://github.com/DockYard/ember-changeset-validations/pull/147. Once merged we can simply use the template helper
      
      ```{{#with (changeset model validator) as |changeset|}}```
    */
    this.changeset = new Changeset(user, lookupValidator(validations), validations, { skipValidate: true } );
  }
});

components.validated-field.js

import Ember from 'ember';

const {
  Component,
  get,
  run
} = Ember;

const DEBOUNCE_TIMER = 400;

export default Component.extend({
  changeset: null,
  property: null,
  
  actions: {
    debounce(event) {
      let val = event.target.value;
      
  		run.debounce(this, '_updateChangeset', val, DEBOUNCE_TIMER); 
    }
  },
  
  _updateChangeset(value) {
    let property = get(this, 'property');
    let changeset = get(this, 'changeset');
    
  	changeset.set(property, value);
  }
});

controllers.application.js

import Ember from 'ember';
import AdultValidations from '../validations/adult';
import ChildValidations from '../validations/child';
import { reservedEmails } from '../validators/uniqueness';
import { schema } from '../models/user';

const { get } = Ember;
const { keys } = Object;
 
export default Ember.Controller.extend({
  AdultValidations,
  ChildValidations,
  reservedEmails,
  
  actions: {
    save(changeset) {
      let snapshot = changeset.snapshot();
      return changeset
        .cast(keys(schema))
        .validate()
        .then(() => {
          if (get(changeset, 'isValid')) {
            return changeset.execute();
          }
        }).catch(() => {
          changeset.restore(snapshot);
        });
    },
    
    reset(changeset) {
      return changeset.rollback();
    },
    
    validateProperty(changeset, property) {
      return changeset.validate(property);
    }
  }
});

models.user.js

import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { belongsTo, hasMany } from 'ember-data/relationships';

export const schema = {
	firstName: attr('string'),
  lastName: attr('string'),
  email: attr('string'),
  age: attr('number'),
  job: attr('string')
};

export default Model.extend(schema);

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.get('store').createRecord('user', {
      firstName: 'Jim',
      lastName: 'Bob',
      age: 10
    });  
  }
});

templates.application.hbs

{{marketing-copy reservedEmails=reservedEmails}}
<hr>

{{!-- 
  Try changing `type` to `child` and `validations` to `ChildValidations` 
--}}
{{edit-user 
		user=model
    validations=AdultValidations
    type="adult"
    save=(action "save")
    reset=(action "reset")
    validateProperty=(action "validateProperty")
}}

templates.components.edit-user.hbs

<h4>{{type}} user: <code>{{user.firstName}} {{user.lastName}}, age {{user.age}} is a {{user.job}}</code></h4>
{{#with (changeset user validations) as |changeset|}}
  	
  {{validated-field 
      type="text" 
      changeset=changeset
      property="firstName"
      validateProperty=(action validateProperty changeset "firstName")
  }}
  
  {{validated-field 
      type="text" 
      changeset=changeset
      property="lastName"
      validateProperty=(action validateProperty changeset "lastName")
  }}
  
  {{validated-field 
      type="text" 
      changeset=changeset
      property="email"
      validateProperty=(action validateProperty changeset "email")
  }}
  
  {{validated-field 
      type="text" 
      changeset=changeset
      property="job"
      validateProperty=(action validateProperty changeset "job")
  }}
  
	{{validated-field 
      type="number" 
      changeset=changeset
      property="age"
      validateProperty=(action validateProperty changeset "age")
  }}
  
	<div class="row">
  	<button {{action save changeset}} disabled={{changeset.isInvalid}} class="button-primary">Save</button>
  	<button {{action reset changeset}}>Reset</button>
	</div>
{{/with}}

templates.components.marketing-copy.hbs

<h2>ember-changeset-validations demo<br><small>debounced</small></h2>

<iframe src="https://ghbtns.com/github-btn.html?user=DockYard&repo=ember-changeset&type=star&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe>

<iframe src="https://ghbtns.com/github-btn.html?user=DockYard&repo=ember-changeset-validations&type=star&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe>

<p><code>ember-changeset</code> and <code>ember-changeset-validations</code> provide an easy way to validate and set changes to your data. Unlike CP or observer based validations, you don't need to write anything special to prevent data from immediately becoming invalid. Validators are simply functions, no CPs or observers required. Try clearing the inputs below, entering invalid values, or even just focusing out. Email is an async validation.</p>
<p>
	Reserved emails: {{#each reservedEmails as |email|}}
  <code>{{email}}</code>
{{/each}}
</p>

templates.components.validated-field.hbs

<label for={{concat type "-" property}}>{{property}}</label>
<input
  class="u-full-width"
  type={{type}}
  id={{concat type "-" property}}
  value={{get changeset property}}
  oninput={{action "debounce"}}
  onblur={{action validateProperty}}>
{{#if (get changeset.error property)}}
  <small>
  	<ul>
    	{{#each (get (get changeset.error property) "validation") as |message|}}
    		<li>{{message}}</li>
    	{{/each}}
    </ul>
  </small>
{{/if}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0",
    "skeleton-css": "https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"
  },
  "addons": {
  	"ember-data": "2.12.1",
    "ember-changeset-validations": "1.2.6",
    "ember-one-way-controls": "0.8.3"
  }
}

validations.adult.js

import Ember from 'ember';
import { validateNumber } from 'ember-changeset-validations/validators';
import UserValidations from './user';

const { assign } = Ember;

export default assign({}, UserValidations, {
  age: validateNumber({ gte: 18 })
});

validations.child.js

import Ember from 'ember';
import { validateNumber } from 'ember-changeset-validations/validators';
import UserValidations from './user';

const { assign } = Ember;

export default assign({}, UserValidations, {
  age: validateNumber({ lt: 18 })
});

validations.user.js

import { 
  validatePresence, 
  validateLength,
  validateFormat
} from 'ember-changeset-validations/validators';
import validateUniqueness from '../validators/uniqueness';

export default {
  firstName: [
    validatePresence(true),
    validateLength({ min: 2 })
  ],
  lastName: [
    validatePresence(true),
    validateLength({ min: 2 })
  ],
  email: [
    validateUniqueness(),
    validateFormat({ type: 'email' })
  ],
  job: validatePresence(true)
}

validators.uniqueness.js

import Ember from 'ember';

const { RSVP: { resolve } } = Ember;
export const reservedEmails = ['foo@bar.com', 'admin@example.com'];

export default function validateUniqueness() {
  return (key, newValue, oldValue, changes) => {
    let isAvailable = reservedEmails.indexOf(newValue) === -1;
    
  	return resolve(isAvailable || 'is taken');
  };
}