ember-cp-validations

components.validated-input.js

import Ember from 'ember';

const {
  computed,
  defineProperty
} = Ember;

export default Ember.Component.extend({
  classNames: ['validated-input'],
  classNameBindings: ['showErrorClass:has-error', 'isValid:has-success'],
  model: null,
  value: null,
  type: 'text',
  valuePath: '',
  placeholder: '',
  validation: null,
  showValidations: false,
  didValidate: false,

  notValidating: computed.not('validation.isValidating').readOnly(),
  hasContent: computed.notEmpty('value').readOnly(),
  hasWarnings: computed.notEmpty('validation.warnings').readOnly(),
  isValid: computed.and('hasContent', 'validation.isTruelyValid').readOnly(),
  shouldDisplayValidations: computed.or('showValidations', 'didValidate', 'hasContent').readOnly(),

  showErrorClass: computed.and('notValidating', 'showErrorMessage', 'hasContent', 'validation').readOnly(),
  showErrorMessage: computed.and('shouldDisplayValidations', 'validation.isInvalid').readOnly(),
  showWarningMessage: computed.and('shouldDisplayValidations', 'hasWarnings', 'isValid').readOnly(),

  init() {
    this._super(...arguments);
    let valuePath = this.get('valuePath');

    defineProperty(this, 'validation', computed.readOnly(`model.validations.attrs.${valuePath}`));
    defineProperty(this, 'value', computed.alias(`model.${valuePath}`));
  },

  focusOut() {
    this._super(...arguments);
    this.set('showValidations', true);
  },
  
  input() {
  	this._super(...arguments);
  	var rawValue = this.get('value') || '';
    var containsUppercase = rawValue.indexOf('uppercase') > -1;
    var sanitizedValue = rawValue.toUpperCase();
    if(containsUppercase) {
     this.get('model').validateAttribute(this.get('valuePath'), sanitizedValue)
        .then(({ m, validations }) => {
          this.set('value', sanitizedValue);
        });
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

models.user-detail.js

import Ember from 'ember';
import DS from 'ember-data';
import { validator, buildValidations } from 'ember-cp-validations';

const { computed } = Ember;
const { attr } = DS;

const Validations = buildValidations({
  firstName: validator('presence', true),
  lastName: validator('presence', true),
  dob: {
    description: 'Date of  birth',
    validators: [
      validator('presence', true)
    ]
  },
  phone: [
    validator('format', {
      allowBlank: true,
      type: 'phone'
    })
  ],
  url: [
    validator('format', {
      allowBlank: true,
      type: 'url'
    })
  ]
}, {
  debounce: 500
});

export default DS.Model.extend(Validations, {
  firstName: attr('string'),
  lastName: attr('string'),
  dob: attr('date'),
  phone: attr('string'),
  url: attr('string')
});

models.user.js

import DS from 'ember-data';
import { validator, buildValidations } from 'ember-cp-validations';

const { attr } = DS;

const Validations = buildValidations({
  username: {
    description: 'Username',
    validators: [
      validator('presence', true),
      validator('length', {
        min: 5,
        max: 15
      })
    ]
  },
  password: {
    description: 'Password',
    validators: [
      validator('presence', true),
      validator('length', {
        min: 4,
        max: 10
      }),
      validator('format', {
        regex: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,10}$/,
        message: '{description} must include at least one upper case letter, one lower case letter, and a number'
      }),
      validator('length', {
        isWarning: true,
        min: 6,
        message: 'What kind of weak password is that?'
      })
    ]
  },
  email: {
    validators: [
      validator('presence', true),
      validator('format', {
        type: 'email'
      })
    ]
  },
  emailConfirmation: validator('confirmation', {
    on: 'email',
    message: 'Email addresses do not match'
  }),
  details: validator('belongs-to')
}, {
  debounce: 500
});

export default DS.Model.extend(Validations, {
  username: attr('string'),
  password: attr('string'),
  email: attr('string'),
  details: DS.belongsTo('user-detail')
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    var details = this.store.createRecord('user-detail');
  	var user = this.store.createRecord('user', {details: details});
    return user;
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<b>Issue: related models added with "belongsTo" loose the "validateAttribute" method.</b>
<br><br>
Example based on https://offirgolan.github.io/ember-cp-validations/
<br>
When name, email or url contains "uppercase" text and the value is valid, the model value is changed to uppercase (a transformation of the user introduced value for the input).
<br><br>
<b>Expected behaviour</b>: When the user enters "http://uppercase" in url field then the value is changed to "HTTP://UPPERCASE"
<br><br>
<b>Current behaviour</b>: When the user enters "http://uppercase" in url field then an ember error appears in console saying "this.get(...).validateAttribute is not a function"
<br><br>
This is a simplified scenario. Real case scenario is used to accept numbers with coma and point as decimal separator regardless of user browser/app language.
<h2>Create an account </h2>
Name: {{validated-input
 model=model
 valuePath="username"
 }}
<br>
Email: {{validated-input
 model=model
 valuePath="email"
 }}
<br>
Url: {{validated-input
 model=model.details
 valuePath="url"
 }}
<br>
User:
<ul>
<li> Name: {{model.username}} </li>
<li> Email: {{model.email}} </li>
<li> Url: {{model.details.url}} </li>
</ul>
<br>
<br>

templates.components.validated-input.hbs

<div class='form-group'>
  {{input type=type value=value placeholder=placeholder class='form-control' name=valuePath}}
  {{#if isValid}}
    <span class='valid-input fa fa-check'></span>
  {{/if}}

  <div class='input-error'>
    {{#if showErrorMessage}}
      <div class='error'>
        {{get (get (get (get model 'validations') 'attrs') valuePath) 'message'}}
      </div>
    {{/if}}

    {{#if showWarningMessage}}
      <div class='warning'>
        {{get (get (get (get model 'validations') 'attrs') valuePath) 'warningMessage'}}
      </div>
    {{/if}}
  </div>
</div>

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"
  },
  "addons": {
    "ember-data": "2.12.1", 
    "ember-cp-validations": "3.3.0"
  }
}