Form Validations

components.my-validations.js

import { validator, buildValidations } from 'ember-cp-validations';

export default buildValidations({
  num:[
  	validator('number',{
    	allowString: true,
      integer: false,
      message: 'Error! This is not an integer!'
    }),
    validator('presence', true)
  ],
  
  email:[
  	validator('format',{
    	type:"email",
      message: 'This is not an email address!'
    })
  ]
});

components.val-example.js

import Ember from 'ember';

export default Ember.Component.extend({
  num : null,
  actions:{
  	check(){
    	if(this.validation(this.get('num'))){
      	this.set('error', '');
      }else{
      	this.set("error", "Error in Box!");
      }
      console.log(this.getProperties('num'));
    }
  },
  validation(value){
    	return Number(parseInt(value)) == value;
   }
});

components.val-example2.js

import Ember from 'ember';
import Validations from './my-validations';

export default Ember.Component.extend(Validations,{
  content: [
    {"name":"Apple","id":1},
    {"name":"Banana","id":2},
    {"name":"Orange","id":3},
    {"name":"Pineapple","id":4},
    {"name":"Gova","id":5}
  ],
  selectedValue:null,
  num: null,
  email: null,
  message: '',
  emailMessage: '',
  fullNameChanged: Ember.observer('email', function() {
    console.log(`fullName changed to: ${this.get('email')}`);
  }),
  actions: {
    change(){},
    check(){
      this.set('message','');
      this.set('emailMessage','');
      this.validate().then(({model, validations})=>{
        if(validations.get('isValid')){
          this.set('message','');
          this.set('emailMessage','');
        }
        else{
          if(model.get('validations.attrs.num.isInvalid')){
            this.set('message',model.get('validations.attrs.num.messages'));
          }
          if(model.get('validations.attrs.email.isInvalid')){
            this.set('emailMessage',model.get('validations.attrs.email.messages'));
          }
        }
      },(errors)=>{
        console.log(errors);
      });
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{val-example}}
<br>
<br>
<h2 id="title">Welcome to Ember</h2>
{{val-example2}}

templates.components.val-example.hbs

Enter Age : <br>
{{input value=num}}
<button {{action 'check'}}>Check</button><br>
{{error}}<br>

templates.components.val-example2.hbs

Select a value:
<select {{action 'change' on='change'}}>
  {{#each content as |item|}}
    <option value="{{item.name}}" selected={{is-equal item selectedValue}}>
      {{item.name}}
    </option>
  {{/each}}
</select>

<br>

Enter Age : <br>
{{input value=num}}<br>
<div style="color:red">{{message}}<br></div>
Enter Email : <br>
{{input value=email}}<br>
<div style="color:red">{{emailMessage}}<br></div>
<button {{action 'check'}}>Check</button>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
  	"ember-truth-helpers":"1.3.0",
    "ember-data": "2.12.1",
    "ember-cp-validations":"3.4.0"
  }
}