Ember Validations

This was for a talk I did about the nuances of client/server validation at the October 2013 Toronto Ember meet.

Transcript

1. How To Do Everything In Ember* @heycarsten SO OBVS!1 *This presentation does not actually contain every knowledge.
2. Let’s submit a form • Validate locally • Display failure if needed • XHR to server • Display failure if needed • Finished • So obvs.
3. K, so validations...
4. Y SO MANY!?
5. ‘Cause it’s hard, cuz • Model-level concern? Should models in our app care about validations all the time? • View-level concern? Should form fields care about their own validity? • Client concern? Maybe delegate to the server, and screw all this nonsense! • OR, maybe we don’t fully understand what we’re building.
6. You ready for this? App.SignupController  =  Em.Controller.extend(Em.Validatable,  {    willValidate:  function()  {        this.validatesEmail('email');        this.validatesPresence('username');        this.validatesLength('password',  {  min:  6  });        this.validatesSameAs('password',  'passwordConfirmation');    } }); • Not model-based • No reliance on observers • No extending Ember or prototypes • No design choices based on reflection • No not using promises • No tests
7. Annnd, the API? • Validatable#validate() • Validatable#validates() • Validatable#willValidate() • Validatable#clearValidations() • Validatable#validationErrors add()  on()  clearOn()
8. What about templates? <form  {{action  "submit"  on="submit"}}>    <fieldset>        <legend>Sign  Up  For  This  Cloud  Service</legend>        <!-­‐-­‐  Any  errors  that  don't  belong  to  a  specific  property  are  displayed  here  -­‐-­‐>        {{validation-­‐errors}}        <ul>            <li>                {{label  for="email"}}                {{field  for="email"  placeholder="someone@example.com"}}            </li>            <li>                {{label  for="username"}}                {{field  for="username"  placeholder="eg:  meghatron,  eviltrout,  elucid"}}            </li>            <li>                {{label  for="password"}}                {{field  for="password"  type="password"  placeholder="Password"}}                {{field  for="passwordConfirm"  type="password"  placeholder="Confirm  Password"}}            </li>        </ul>        <p>            <button  type="submit">                Sign  Up            </button>        </p>    </fieldset> </form>
9. What does it look like? SEXY!!!
10. *snort* OMG you implemented another Ember validation library for no reason, what a moran! • BUT it was an invaluable experience! • We can sort of get stuck in a bootstrapping k- hole sometimes. Common, you know it’s true. • It’s important to occasionally break out of this rut and design something; actually learn. Even if it’s just an exploration.
11. Alright, so... Validations: SOLVED • LOL! OH, HELL NO. • Here’s the code: gist.github.com/heycarsten/ 6638842 • Then, probably use something else that’s a real project, like: github.com/dockyard/ember- validations
12. Fin;