New Twiddle

application.controller.js

import Ember from 'ember';

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

application.template.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
<form>
  {{my-component type='text' required='true' placeholder='My field'}}
  <button type='submit'>Submit</button>
</form>
<br>
<br>

my-component.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement: function() {
    this.$('input, textarea').on('invalid', function() {
      console.log('worked!');
      Ember.$(this).addClass('isDirty');
    });
  },
  actions: {
    keyDownAction: function(value, event) {
      // Mark input/textarea as dirty
      Ember.run(() => {
        this.$('input, textarea').addClass('isDirty');
      })

      if (this.get('keyDown')) {
        this.sendAction('keyDown', value, event);
      }
    },
    focusInAction: function(value, event) {
      if (this.get('focusIn')) {
        this.sendAction('focusIn', value, event);
      }
    },
    focusOutAction: function(value, event) {
      // Mark input/textarea as dirty
      Ember.run(() => {
        this.$('input, textarea').addClass('isDirty');
      })

      if (this.get('focusOut')) {
        this.sendAction('focusOut', value, event);
      }
    }
  }
})

my-component.template.hbs

{{input type=type value=value id=inputId class=inputClass name=name tabindex=tabindex autofocus=autofocus required=required list=list
  min=min max=max step=step
  key-down="keyDownAction" focus-in="focusInAction" focus-out="focusOutAction"}}
<span class="bar"></span>
<label class="{{if value 'text-present'}}">{{placeholder}}</label>

twiddle.json

{
  "version": "0.4.10",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.9/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.11/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.9/ember-template-compiler.js"
  }
}