Ember.JS &
Client Side Validations


Brian Cardarella

@bcardarella




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

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




  1. Generate initializer
  2. Map server-side models to client-side models
  3. 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


  1. Client validations pass
  2. Send to server
  3. Server side validations fail
    and notifies client

Ideal Validation Workflow + 1

  1. Client validations pass
  2. Send to server
  3. Server side validations pass
  4. 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