Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Ember Validations

heycarsten
October 03, 2013

Ember Validations

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

heycarsten

October 03, 2013
Tweet

More Decks by heycarsten

Other Decks in Programming

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. ‘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.
  4. 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
  5. Annnd, the API? • Validatable#validate() • Validatable#validates() • Validatable#willValidate() •

    Validatable#clearValidations() • Validatable#validationErrors add()  on()  clearOn()
  6. 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="[email protected]"}}            </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>
  7. *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.
  8. 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