Create a custom text input error message in Ember.js

Question

I'm trying to create a custom text field that has a function that will allow me to pass in a custom error message and display this error message as part of the DOM.

I know I would start by extending the TextField element like so:

CustomTextField = Ember.TextField.extend({
   inValid: function(error) {
      //function body
   }
});

But the exact method I need to override and create is proving difficult for me to discover. It would be ideal to have something like:

<input type="text" />

go to:

 <span class="input-error"><input type="text" />Invalid Email</span>

For example. Any help is much appreciated.

Answer 1

I'm not entirely sure how you intend to update the message on the view's object, but you could do something like the following whereby each view keeps an eye on the state of its content:

isValid: function() {
    return Boolean(String(this.get('value')).match(new RegExp('.+?@.+?\..{2,3}', 'i')));
}.property('value')

I've creared you a JSFiddle over here: http://jsfiddle.net/geXsU/1/