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

2 Comments

  • E8a35961cc9ac2aca01c3a173f5c8d4a

    Rohan Daxini · Reply

    Thanks for sharing Darshan. Seems this package Ember-model-validator (active and maintained) provides most of the commonly used validations so we are covered on client side validations. Do you have a list of advantages and disadvantages of using client side validations or did you face any issues / drawbacks? Did you also kept Rails validations along with these client side too or removed all Rails validations and just kept these client side ones through Ember package?

    One of the issue I faced in past (and not sure how true is this now) is if you turn off Active Scripting from your browser then none of the client side scripting will work. So we generally keep both, client side validations and also server side Rails validations. This takes care that they are caught properly and if Active Scripting is ON then client side validations will work and are are quick feedback for user.

  • 79142437285789d633a198d6740f8731

    Darshan Chauhan · Reply

    Hi Rohan, yes it takes care of most of the validations and also this is still yet to be implemented so I'm not sure about the issues that we might face after implementing it. I'll keep you informed.

Your comment

*

*