Ember extend input helper so that I can add a class whenever the html5 invalid event fires

In a non Ember world I could put this in my document ready:

$("input").on("invalid", function(event) {
  $(this).addClass('isDirty');
});

And then I would know that whenever a form is submitted, it would inturn fire the invalid event on invalid inputs and allow me to mark them as dirty for css purposes. I tried to do this in Ember in a component (in didInsertElement):

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);
      }
    }
  }
})

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>

But my event isn't firing. Can I attach the ember input helper to the html5 invalid event?