Skip to content Skip to sidebar Skip to footer

How To Implement Ember-validations In Ember-app-kit(eak)

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 V

Solution 1:

  1. 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.

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

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

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

                    {{#if errors.newFamilyname}}
                        <spanclass="error"><spanclass="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

Post a Comment for "How To Implement Ember-validations In Ember-app-kit(eak)"