Validations & EasyForm
@bcardarella
@DockYard
github.com/dockyard/ember-validations
github.com/dockyard/ember-validations
github.com/dockyard/ember-validations
pre-rewrite
(old & busted)
- rails-like validations
- limited validation graph
- support for all "common" validations
- validations were blocking
github.com/dockyard/ember-validations
post-rewrite
- ember-like validations
- validations are promise based
- support for all "common" validations
- validators are instances of classes
- parent's isValid state is product of children's
- parent's error messages is sum of children's
- infinite-depth validation graph
github.com/dockyard/ember-validations
ember-like validations
-
observes property changes
validations are live
- observes the state of the graph
validators can be added to the graph at any time
(removal not so hot right now)
github.com/dockyard/ember-validations
validations are promise based
- validations should not rely on race conditions
- in a good place for remote validations
(not yet supported out of the box) - all promises must complete
github.com/dockyard/ember-validations
support for all "common" validations
absence, acceptance,
confirmation, exclusion, format,
inclusion, length,
numericality, presence
confirmation, exclusion, format,
inclusion, length,
numericality, presence
custom error message, and i18n-ish
github.com/dockyard/ember-validations
validators are instances of classes
Couples with observeres for more complex validators like confirmation
validations: {
password: {
confirmation: true
}
}
github.com/dockyard/ember-validations
- parent's isValid state is product of children's
- parent's error messages is sum of children's
- infinite-depth validation graph
github.com/dockyard/ember-validations
Not done yet
- uniqueness
- custom validators
validations: {
custom: function() {
// add message to errors
}.validates('prop1', 'prop2')
}
github.com/dockyard/ember-validations
Not done yet
- ember-data support
github.com/dockyard/ember-easyForm
ember-easyForm
github.com/dockyard/ember-easyForm
ZOMG MOAR LIVE CODEZ!
github.com/dockyard/ember-easyForm
ember-easyForm
- replaces ember's input helper
- quickly create semantic forms
- assumes a "submit" action
(can be overridden) - support different wrappers
(bootstrap... will be extracted)
github.com/dockyard/ember-easyForm
ember-easyForm
- integrates with ember-validations
- will properly set input type based
upon property name - input types can be overridden
- no radio button support
(not my fault!)
github.com/dockyard/ember-easyForm
what makes up an input
{{input firstName}}
<div class="string input">
<label for="ember404">First name</label>
<input id="ember404" type="text"/>
<span class="error">Will show first error message</span>
</div>
github.com/dockyard/ember-easyForm
what makes up an input - hint
{{input firstName hint="your first name"}}
<div class="string input">
<label for="ember404">First name</label>
<input id="ember404" type="text"/>
<span class="error"></span>
<span class="hint">your first name</span>
</div>
github.com/dockyard/ember-easyForm
what makes up an input - types
{{input firstName as="text"}}
<div class="string input">
<label for="ember404">First name</label>
<textarea id="ember404"></textarea>
<span class="error"></span>
</div>
github.com/dockyard/ember-easyForm
what makes up an input - types
- string - default
- checkbox
- select
- password
- url
- tel
- color
- search
- number
- date
github.com/dockyard/ember-easyForm
what makes up an input - type from property name
{{input password}}
<div class="string input">
<label for="ember404">First name</label>
<input id="ember404" type="password"/>
<span class="error"></span>
</div>
github.com/dockyard/ember-easyForm
what makes up an input - type from property name
- /password/
- /email/
- /url/
- 'color/
- /^tel/
- /search/
github.com/dockyard/ember-easyForm
what makes up an input - type from property value
user.set('birthday', new Date('August 15, 1979'));
{{input birthday}}
<div class="string input">
<label for="ember404">First name</label>
<input id="ember404" type="date"/>
<span class="error"></span>
</div>
github.com/dockyard/ember-easyForm
what makes up an input - type from property value
- string - default
- number
- date
- boolean
(checkbox)
github.com/dockyard/ember-easyForm
what makes up an input - block form
{{#input firstName}}
{{input-field firstName}}
{{label-field firstName}}
{{/input}}
<div class="string input">
<input id="ember404" type="text"/>
<label for="ember404">First name</label>
</div>
github.com/dockyard/ember-easyForm
what makes up an input - block form helpers
- input-field
- label-field
- error-field
- hint-field
let's tie is all together
I ♥ Pull Requests!
github.com/dockyard/ember-validations
github.com/dockyard/ember-easyForm
Thank You NYC!
ember-validations-and-ember-easyForm
By bcardarella
ember-validations-and-ember-easyForm
- 4,703