ValidatedInput

validated-input.hbs

{{#unless textarea}}
  {{input
    maxlength=maxlength
    type=type
    placeholder=placeholder
    value=value
    class=className
    id=(if count (concat valuePath count) valuePath)
    focus-out="focusedOut"
    key-up="keyedUp"
  }}
  {{#if showMessage}}
      {{#if (v-get model valuePath "message")}}
        {{#tether-dialog
          container-class="tether-dialog-reset"
          target=(concat "#" valuePath)
          hasOverlay=false
          attachment="bottom left"
          targetAttachment="top left"
          offset="5px 0"
        }}
        <div class="validated-input-error-dialog animated flipInX .error">
         {{t (v-get model valuePath "message")}}
       </div>
        {{/tether-dialog}}
      {{/if}}
  {{/if}}
{{else}}
  {{textarea
    autoresize=true
    placeholder=placeholder
    value=value
    class=className
    id=valuePath
    focus-out="focusedOut"
    key-up="keyedUp"
  }}
  {{#if showMessage}}
      {{#if (v-get model valuePath "message")}}
        {{#tether-dialog
          container-class="tether-dialog-reset"
          target=(concat "#" valuePath)
          hasOverlay=false
          attachment="bottom left"
          targetAttachment="top left"
          offset="5px 0"
        }}
        <div class="validated-input-error-dialog animated flipInX">
         {{t (v-get model valuePath "message")}}
       </div>
        {{/tether-dialog}}
      {{/if}}
  {{/if}}
{{/unless}}

validated-input.js

import Ember from 'ember';
const { run } = Ember;
const { computed, defineProperty, observer } = Ember;
import { task, timeout } from 'ember-concurrency';

/*
* didValidate - trigger showMessage and can show mwwage if
*/
export default Ember.Component.extend({
  type: 'text',
  focusedOut: false,
  attributevalidation: null,
  classNameBindings: ['showMessage:invalid'],
  init() {
    this._super(...arguments);
    const valuePath = this.get('valuePath');
    defineProperty(this, 'attributeValidation', computed.oneWay(`model.validations.attrs.${valuePath}`));
    defineProperty(this, 'value', computed.alias(`model.${valuePath}`));
  },
  showMessage: computed('didValidate', 'focusedOut', function() {
    return this.get('didValidate') || this.get('focusedOut');
  }),
  isValid: computed.oneWay('attributeValidation.isValid'),
  isInvalid: computed.oneWay('attributeValidation.isInvalid'),
  setFocusedOut: task(function * () {
    yield timeout(1500);
    /* jshint ignore:start */
    if (this.get('isInvalid')) { this.set('focusedOut', true); }
    /* jshint ignore:end */
  }).restartable(),
  actions: {
    focusedOut() {
      if (this.get('isInvalid')) { this.set('focusedOut', true); }
    },
    keyedUp() {
      if (this.get('isInvalid')) {
        this.get('setFocusedOut').perform();
      } else {
        this.set('focusedOut', false);
      }
    }
  }
});