ember-changeset-validations demo

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'),
  filter: attr()
};

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

{{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>

<button type="button" {{on "click" this.addField}}>Add Field</button>

{{#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.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 (mut (get changeset property)) value="target.value"}}
  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": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1",
    "skeleton-css": "https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"
  },
  "addons": {
    "ember-data": "3.18.0",
    "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 = ['[email protected]', '[email protected]'];

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