Model level validations in Ember.js

We've couple of Ember apps which communicates to single rails API. We were working on making our API more robust for data related operations so we added couple of checks and validations which led us to a thought that it would be even better if we can add validations on our front-end Ember applications.

But Ember.js framework doesn't provide validations for models. So we investigated further and we found couple of packages that we can use for model level validations. Ember-model-validator is the one of the most used package for model validations in Ember.

It is really easy to use and integrate.

This Ember cli addon is born from the necessity of having some sort of similar validation support like we have on Rails with Active Record Validations.

This package includes validations like Presence, Acceptance, Absence, Format, Length, Email, Color, ZipCode, URL, Inclusion, Exclusion, Numericality, Date, Match, Password etc.

We can also pass values like message, errorAs, allowBlank and if to make validations more specific.

There are many more options available, you can go to Ember-model-validator for more detail. Some validations I've shown in below example.

import Ember from 'ember';
import Model from 'ember-data/model';
import attr from 'ember-data/attr';

export default Model.extend({
  name:    attr('string'),
  number:  attr('number'),
  panCard: attr('number'),
  email:   attr('string'),
  
  validations: {
    name: {
      //It uses Ember.isBlank method to check wether value is present or not. If it is empty or whitespace string then it will be considered as not present.
      presence: true
    },
    acceptConditions: {
      //Default accepted values are [1, '1', true] but you can specify your own custom values.
      acceptance: {accept: 'yes'}
    },
    number: {
      //It uses Ember.isPresent method to check the presence.
      absence: true
    },
    name:{
      //You can specify regEx to match. It uses match() method of string.
      format: { with: /^[a-zA-Z]+$/ }
    },
    panCard:{
      //Length should be exact 5
      length: 5
      //Err with message
      length: { is: 10, message: 'this is not the length of a pancard nmbr' }
    },
    email: {
      //Validates format of Email
      email: true
    }
  }
});

To do custom validations

export default DS.Model.extend(Validator,{

  otherCustomAttribute: DS.attr('number', { defaultValue:  12345 }),

  validations: {
    otherCustomAttribute: {
      custom: {
        validation: function(key, value){
          return value.toString().length === 5 ? true : false;
        },
        message: function(key,value, _this){
          return key + " must have exactly 5 digits";
        }
      }
    }
  }

});

Additionally Ember-model-validator also provides mixin which you can include in your model for adding validation support. For example,

//Using `except`
Model.validate({except:['name', 'cellphone']});

//Using `only`
Model.validate({only:['favoriteColor', 'mainstreamCode']});

//Using `addErrors`
Model.validate({addErrors:false});
// This will validate the model but won't add any errors.

You can also set default language for validatorDefaultLocale in config environment file, by default it is en.
So as you can see most of the validations are quite similar to validations in Rails so it is easier to use if you're familiar with Rails.

Some other packages I found which are also good for model level validations. Links are below

ember-validations,
ember-changeset-validations

Reference: Ember-model-validator