fiddle.coffee

## fiddle.coffee
window.App = Ember.Application.create()

App.Focusable = Ember.Mixin.create
  # Don't let events spoil your Kool-Aid!
  # Let's get these out of the way by turning them
  # into a magical property:
  focused: false
  focusIn: (event) -> @set 'focused', true
  focusOut: (event) -> @set 'focused', false

App.AsyncValidation = Ember.Mixin.create
  # Set up an observer that will watch when  the field is
  # in and out of focus.
  valid: (->
    if @get 'focused'
      @set 'code', ''
      @set 'message', ""
    else
      value = @get 'value'
      # Call the specific validation function, passing the
      # value to validate and a callback to which the function
      # must pass the result of the validation.
      @validate value, (code, message) =>
        # If everything's okay, we can show this result
        # Make sure that the value hasn't changed and that
        # the field isn't being edited
        if value == @get('value') and not @get('focused')
          @set 'code', code
          @set 'message', message
  ).observes 'focused'
  # Dummy validation function
  validate: (value, next) -> next '', ""

App.TextField = Ember.View.extend App.Focusable, App.AsyncValidation,
  classNames: ['control-group']
  type: 'text'
  # This is the value of the field:
  value: ""
  # And its placeholder:
  placeholder: ""
  # Validation status. One of '', 'error' or 'success'
  code: ''
  classNameBindings: ['code']
  # Error or success message
  message: ""
  template: Ember.Handlebars.compile """
    <div class="controls">
      {{view Ember.TextField
        placeholderBinding = "view.placeholder"
        valueBinding = "view.value"
        typeBinding = "view.type"
      }}
      <span class="help-inline">{{view.message}}</span>
    </div>
    """

App.EmailField = App.TextField.extend
  placeholder: "Email"
  validate: (value, status) ->
    if value.length == 0
      status '', ""
    # Might catch the occasional typo
    else if value.indexOf('@') == -1 or value.indexOf('.') == -1
      status 'error', "Please enter a valid email"
    else
      # Insert AJAX call here:
      setTimeout((->
        status 'success', "Email address available"
      ), 1000)

## fiddle.css
.error .controls {
    color: red;
}
.success .controls {
    color: green;
}

## fiddle.html
<script type="text/x-handlebars">
{{view App.UsernameField}}
</script>

## fiddle.manifest
name: Ember.js AJAX field validation
description: Synchronous and asynchronous form field validation using Ember.js bindings
authors:
  - Alexei Boronine
resources:
  - http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js
  - http://code.jquery.com/jquery-1.7.2.min.js
  - http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.pre.min.js