Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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', ""
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)​
.error .controls {
color: red;
}
.success .controls {
color: green;
}​
<script type="text/x-handlebars">
{{view App.UsernameField}}
</script>​
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
@boronine

This comment has been minimized.

Copy link
Owner Author

boronine commented Aug 9, 2012

@boronine

This comment has been minimized.

@boronine

This comment has been minimized.

Copy link
Owner Author

boronine commented Aug 10, 2012

UPDATED FIDDLE: http://jsfiddle.net/VrGqz/

@boronine

This comment has been minimized.

Copy link
Owner Author

boronine commented Aug 10, 2012

UPDATED FIDDLE (2): http://jsfiddle.net/kTJCH/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.