Ember.JS &
Client Side Validations
Brian Cardarella
http://www.rvl.io/bcardarella/ember-js-and-clientsidevalidations
Who?
Owner of @DockYard
Former organizer for BostonRB
Organizer for Boston OpenHack
Co-Organizer for Boston Ember.js
DockYard
Boston-based web consultancy
Rails, PostgreSQL, Ember.js
Rails, PostgreSQL, Ember.js
http://dockyard.com
http://reefpoints.dockyard.com
- Define
- Demo
- Challenges
Experience
Client Side validations
github.com/bcardarella/client_side_validations
- Rails gem
- Supports custom validations
- Renders client side same as server side
- When in doubt prefer server side
ember-data-validations
github.com/dockyard/ember-validations
- Implements Rails validation model in Ember-Data
- Acceptance, Confirmation, Exclusion, Format, Inclusion, Length, Numericality, Presence
- No Uniqueness (yet)
- Close to i18n message support
ember-validations
github.com/dockyard/ember-validations
App.User = Ember.Object.extend(Ember.Validations.Mixin, {
firstName: DS.attr('string'),
validations: {
firstName: {
presence: true
}
}
});
ember-easyForm
github.com/dockyard/ember-easyForm
- Similar API to SimpleForm for Rails
{{#formFor controller}}
{{input firstName}}
{{/formFor}}
<form novalidate="novalidate">
<div class="input string">
<label for="inputGUID">First name</label>
<input id="inputGUID" type="text">
<span class="errors"></error>
</div>
</form>
client_side_validations-ember
github.com/dockyard/client_side_validations-ember
Bootstraps your Ember app models with server-side validations
- Generate initializer
- Map server-side models to client-side models
- Include asset file
- Define
- Demo
- Challenges
- Define
-
Demo
- Challenges
ember-easyForm
- Support more input types (on Ember?)
- How errors are rendering
- fieldsFor
- i18n support for labels
ember-validations
- i18n error messaging
- Framework (Rails) specific
- Uniqueness?
- Cascading validations
ember-data
- Add 'validating' state to
DS.StateManager prior to 'inFlight' - 'inFlight.becameInvalid' should not
blow away model.errors object
Ideal Validation Workflow
Ideal Validation Workflow
Ideal Validation Workflow
- Client validations pass
- Send to server
- Server side validations fail
and notifies client
Ideal Validation Workflow + 1
- Client validations pass
- Send to server
- Server side validations pass
-
Record attempts to save, database constraint fails,
validation bubbles up and notifies client
Thank you!
@bcardarella
http://dockyard.com
github.com/dockyard
ember js and clientsidevalidations
By bcardarella
ember js and clientsidevalidations
- 7,594