Create a gist now

Instantly share code, notes, and snippets.

Synchronous and asynchronous form field validation using Ember.js bindings
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', ""
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>
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"
# Insert AJAX call here:
status 'success', "Email address available"
), 1000)​
.error .controls {
color: red;
.success .controls {
color: green;
<script type="text/x-handlebars">
{{view App.UsernameField}}
name: Ember.js AJAX field validation
description: Synchronous and asynchronous form field validation using Ember.js bindings
- Alexei Boronine