Validate EmberJS TextField on the fly?

Question

I need to validate a form textfield that's bound to a property of a model using EmberJS. I want the user to only be able to type valid, positive numbers.

I know of jQuery.isNumber(), but I don't know how to wire it to the field. I tried writing explicit getter/setter functions on the model's property using Ember.computed(...), but it didn't work.

Is there something similar to WinForms onChanging() event that I can hook up to?

Answer 1

There are a number of ways to do this sort of thing. Here we can accomplish this using bindings and observers.

First lets create a function that will always return a number.

var onlyNumber = function(input) {
    return input.toString().replace(/[^\d.]/g, "");
};

Using that we can do the following

App = Ember.Application.create();

App.person = Ember.Object.create({
    age: 42
});

App.NumberField = Ember.TextField.extend({
    valueBinding: Ember.Binding.from("App.person.age").transform(onlyNumber),

    _cleanValue: function() {
        this.set('value', onlyNumber(this.get('value')));
    }.observes('value')
});

1) We are creating a Binding to the Person's age, but anything that passes through this binding can only be a number. See Ember.Binding to/from transforms for more details.

2) We are observing the text field's value and setting it to be only a number when it changes. If the user enters '42a' we will immediately set it back to '42'. Note that even though '42a' was in the text input for a brief second it would not have been able to pass through the binding because of our transform.

Here is a fiddle showing this example: http://jsfiddle.net/nDBgC/

Answer 2

You could add a keyDown event handler on your TextField, see http://jsfiddle.net/pangratz666/SKJfF/:

App.NumberTextField = Ember.TextField.extend({
    // implementation of this function, see http://stackoverflow.com/a/995193/65542
    keyDown: function(event) {
        // Allow: backspace, delete, tab, escape, and enter
        if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
        // Allow: Ctrl+A
        (event.keyCode == 65 && event.ctrlKey === true) ||
        // Allow: home, end, left, right
        (event.keyCode >= 35 && event.keyCode <= 39)) {
            // let it happen, don't do anything
            return;
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                event.preventDefault();
            }
        }
    }
});​

Answer 3

Code (handles only numeric input and allows binding of number rather than string, if desired):

App.NumberFieldComponent = Ember.TextField.extend({
  tagName: "input",
  type: "number",

  numericValue: function(key, value) {
    if (arguments.length === 1) {
      return parseFloat(this.get("value"));
    } else {
      return this.set("value", (value !== void 0 ? "" + value : ""));
    }
  }.property("value"),

  didInsertElement: function() {
    return this.$().keypress(function(key) {
      if ((key.charCode !== 46) && (key.charCode !== 45) && (key.charCode < 48 || key.charCode > 57)) {
        return false;
      }
    });
  }
});

Template:

{{number-field numericValue=someNumericProperty}}

Answer 4

This is an updated answer (from @neverfox) for the latest Ember version (Ember-cli 2.0). It is written in coffeescript, and a bit altered to match the becomeFocus example (http://guides.emberjs.com/v1.10.0/cookbook/user_interface_and_interaction/focusing_a_textfield_after_its_been_inserted/)

1. Generate the component:

   ember g component number-field

2. Change the blueprint code (app/components/number-field.coffee) to

  `import Ember from 'ember'`
    
    NumberFieldComponent = Ember.Component.extend
        tagName: "input"
        type: "number"
    
     numericValue: ( (key, value) ->
      if arguments.length == 1
       parseFloat(this.get('value'))
      else
       return this.set("value", (value? ? "" + value : ""))
     ).property('value')
    
     assignFilter: ( ->
      this.$().keypress (key) ->
       if ((key.charCode != 46) && (key.charCode != 45) && (key.charCode < 48 || key.charCode > 57))
        false
     ).on('didInsertElement')
            
    
    `export default NumberFieldComponent`