Giter VIP home page Giter VIP logo

ember-cp-validations's Introduction

Ember CP Validations

Build Status npm version Code Climate Test Coverage Ember Observer Score Dependency Status devDependency Status

A Ruby on Rails inspired model validation framework that is completely and utterly computed property based.

Features

No observers were used nor harmed while developing and testing this addon.

  • Lazily computed validations
  • Ruby on rails inspired validators
  • Support for both Ember Data Models and Objects
  • Synchronous and asynchronous support for both validators and validations
  • Dirty tracking
  • Support for nested models via belongsTo and hasMany relationships
  • Support for nested objects
  • Easily integrated with Ember Data's DS.Errors
  • No observers. Seriously... there are none. Like absolutely zero....
  • Meta data based cycle tracking to detect cycles within your model relationships which could break the CP chain
  • Custom validators
  • Ember CLI generator to create custom validators with a unit test
  • Debounceable validations
  • I18n support

Introduction to ember-cp-validations

Installation

ember install ember-cp-validations

Helpful Links

Looking for help?

If it is a bug please open an issue on GitHub.

Basic Usage - Models

The first thing we need to do it build our validation rules. This will then generate a Mixin that you will be able to incorporate into your model or object.

// models/user.js

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

const Validations = buildValidations({
  username: validator('presence', true),
  password: [
    validator('presence', true),
    validator('length', {
      min: 4,
      max: 8
    })
  ],
  email: [
    validator('presence', true),
    validator('format', { type: 'email' })
  ],
  emailConfirmation: [
    validator('presence', true),
    validator('confirmation', {
      on: 'email',
      message: '{description} do not match',
      description: 'Email addresses'
    })
  ]
});

Once our rules are created and our Mixin is generated, all we have to do is add it to our model.

// models/user.js

export default DS.Model.extend(Validations, {
  'username': attr('string'),
  'password': attr('string'),
  'email': attr('string')
});

Basic Usage - Objects

You can also use the generated Validations mixin on any Ember.Object or child of Ember.Object, like Ember.Component. For example:

// components/x-foo.js

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

const Validations = buildValidations({
  bar: validator('presence', true)
});

export default Ember.Component.extend(Validations, {
  bar: null
});

To lookup validators, container access is required which can cause an issue with Ember.Object creation if the object is statically imported. The current fix for this is as follows.

// models/user.js

export default Ember.Object.extend(Validations, {
  username: null
});

Ember < 2.3.0-beta.1

// routes/index.js

import User from '../models/user';

export default Ember.Route.extend({
  model() {
    var container = this.get('container');
    return User.create({ username: 'John', container })
  }
});

Ember >= 2.3.0-beta.2

// routes/index.js

import User from '../models/user';

export default Ember.Route.extend({
  model() {
    return User.create(
     getOwner(this).ownerInjection(),
     { username: 'John' }
    );
  }
});

Advanced Usage

Default Options

Default options can be specified over a set of validations for a given attribute. Local properties will always take precedence.

Instead of doing the following:

const Validations = buildValidations({
  username: [
    validator('presence', {
      presence: true,
      description: 'Username'
    }),
    validator('length', {
      min: 1,
      description: 'Username'
    }),
    validator('no-whitespace-around', {
      description: 'A username'
    })
  ]
});

We can declare default options:

const Validations = buildValidations({
  username: {
    description: 'Username'
    validators: [
      validator('presence', true),
      validator('length', {
        min: 1
      }),
      validator('no-whitespace-around', {
        description: 'A username'
      })
    ]
  },
});

In the above example, all the validators for username will have a description of Username except that of the no-whitespace-around validator which will be A username.

Options as Functions

All options can be functions which are processed lazily before validate is called. These functions have the context of the validator that is being executed, giving you access to all its properties such as options, model, attribute, etc.

Please note that the message option of a validator has its own signature.

const Validations = buildValidations({
  dob: validator('date', {
    description: 'Date of Birth',
    format() {
      return this.get('model.meta.date.format');
    },
    before() {
      return moment();
    },
    after() {
      return moment().subtract(120, 'years');
    }
  })
});

Nested Keys

When declaring object validations (not including Ember Data models), it is possible to validate child objects from the parent object.

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

const Validations = buildValidations({
  'acceptTerms': validator('inclusion', { in: [ true ] }),
  'user.firstName': validator('presence', true),
  'user.lasName': validator('presence', true),
  'user.account.number': validator('number')
});

export default Ember.Component.extend(Validations, {
  acceptTerms: false,
  user:  { 
    firstName: 'John', 
    lastName: 'Doe' ,
    account: { 
      number: 123456, 
    }
  },
  isFormValid: Ember.computed.alias('validations.isValid'),
});

ember-cp-validations's People

Contributors

offirgolan avatar stefanpenner avatar blimmer avatar jakesjews avatar luxzeitlos avatar rwjblue avatar csantero avatar xtian avatar danielspaniel avatar davewasmer avatar kiwiupover avatar mike-north avatar taras avatar turbo87 avatar mjuniper avatar

Watchers

James Cloos avatar Guirec Corbel avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.