How to implement Ember-Validations in Ember-App-Kit(EAK)

Question

I have a ember-app-kit application. For the form I am using ember default views. But for form validations I have came across with this lib which everyone highly recommends. Ember Validations By Docyard . But I am not sure how to implement the same with my eak set-up.

Questions that I have: 1. Where should I add validations ? 2. What to declare when defining validations? 3. Errors how to show them on focus out or even on submit button ?

Say for example I have a sign up form and I want to validate firstname lastname, email, password, gender(select options) . How should I go about it ?

If possible please clarify the queries with a JSbin.

kris kris · Accepted Answer · 2014-03-05T11:19:14

Validations should go to controller, unless your working with dyanmic formsets, which can be duplicated. Also u have to wrap ControllerObject into this

var AddController = Ember.ArrayController.extend(Ember.Validations.Mixin, {}

To start validation u have to make new Object named validations

You have to add input value to be validated

  validations: {
          newFirstname:{
            format: { with: /^[A-Za-z-]{2,16}$/, allowBlank: true, message: 'Enter valid name.'  }
          },
          newFamilyname: {
            format: { with: /^[A-Za-z-]{3,16}$/ , message: 'Required field lastname.'  }
          }
        },

Showing errors.

   <div class="row">
        <div class="col-md-6 col-xs-4">
            <label>First name: </label>
                {{input type="text" placeholder="First name" value=newFirstname class="form-control"}}

                    {{#if errors.newFirstname}} 
                        <span class="error errorForValidation"><span class="glyphicon glyphicon-warning-sign"></span> {{errors.newFirstname}}</span>
                    {{/if}}

        </div>
        <div class="col-md-6 col-xs-4">
            <label>*Last name: </label>
                {{input type="text" placeholder="Family name" value=newFamilyname class="form-control"}}

                    {{#if errors.newFamilyname}}
                        <span class="error"><span class="glyphicon glyphicon-warning-sign"></span> {{errors.newFamilyname}}</span>
                    {{/if}}

        </div>
    </div><!--end row-->

Showing button when validation is flawless

<button type="submit" class="btn btn-primary" {{bind-attr disabled="isInvalid"}}{{action 'GetData'}}>Create</button>

JSBIN : http://emberjs.jsbin.com/iDeQABo/17/edit

How to implement Ember-Validations in Ember-App-Kit(EAK)

1 Answers