Ember-validate-js NPM

ember-validate-js

A flexible validations library powered by Ember computed properties and validate.js.

Disclaimer

Warning: This project is currently a proof-of-concept and is not yet full-featured. Use at your own risk!

Features

Driven by computed properties
No more observers or calling .validate() to validate your object.
Flexible
Use it on a plain ol' Ember Object or with an ember-data model.
Change constraints on the fly (coming soon)
Change constraints on the fly and everything updates as you'd expect. Track the progress here, help is welcome.
Works with 1.12.x and 1.13.x (and likely earlier)
We all want to be on the latest and greatest version of Ember, but sometimes it's just not possible right away. This library is definitely compatible with Ember 1.13, and unofficially compatible with 1.12.x and below (I'll do my best to support it for a while).

Usage

Mix the ValidationMixin into the Object you want to apply validations.

import Ember from 'ember';
import ValidationMixin from 'ember-validate-js/mixins/validation';

export default Ember.Object.extend(ValidationMixin, {
  ...
});

or an Ember Data Model

import DS from 'ember-data';
import ValidationMixin from 'ember-validate-js/mixins/validation';

export default DS.Model.extend(ValidationMixin, {
  ...
});

Provide a constraints property on the object you've mixed the ValidationMixin into. These constraints are passed to the ValidateJS library and used to validate the properties on your object. See the ValidateJS documentation for more a list of available validators.

  constraints: Ember.computed(function() {
    return {
      name: {
        presence: true
      },
      password: {
        presence: {message: 'you gotta tell us your name'},
        length: {minimum: 5}
      },
      passwordConfirmation: {
        presence: true,
        equality: 'password'
      }
    };
  })

Use the auto-generated computed properties to check validity.
Each property gets three helpers (not that "property" below is replaced with the name of the property):
- (property)Errors
  An array of validation errors. If there are no errors, the array will be empty.
- (property)Error
  A convenience accessor for the first error in the errors array. Useful for showing a single error to the user at a time.
- (property)IsValid
  A boolean to check if the property is valid.
And the whole object gets validity properties:
- constraintsMet
  A boolean to check if all properties with validations are valid on the model.
- constraintsNotMet
  The inverse of constraintsMet.

Example

For example, imagine you have a User model that you use to register a new user.

app/models/user.js

import Ember from 'ember';
import DS from 'ember-data';
import ValidationMixin from 'ember-validate-js/mixins/validation';

const attr = DS.attr;

export default DS.Model.extend(ValidationMixin, {
  name:                 attr('string'),
  email:                attr('string'),
  password:             attr('string'),
  passwordConfirmation: attr('string'),

  // See ValidateJS documentation for available
  // validators
  constraints: Ember.computed(function() {
    return {
      name: {
        presence: true
      },
      email: {
        presence: true,
        email: true
      },
      password: {
        presence: true,
        length: {minimum: 5, maximum: 128}
      },
      passwordConfirmation: {
        presence: true,
        equality: 'password'
      }
    };
  })
});

app/templates/components/sign-up-form.hbs

<form>
  <div>
    <h3>Name</h3>
    {{input value=user.name}}
    {{user.nameError}}
  </div>
  <div>
    <h3>Email</h3>
    {{input value=user.email}}
    {{user.emailError}}
  </div>
  <div>
    <h3>Password</h3>
    {{input type='password' value=user.password}}
    {{user.passwordError}}
  </div>
  <div>
    <h3>Confirm Password</h3>
    {{input type='password' value=user.passwordConfirmation}}
    {{user.passwordConfirmationError}}
  </div>

  <button {{action 'submit'}} disabled={{user.constraintsNotMet}}>Submit</button>
</form>

Browser Support

This project relies on Object.keys, so its use on obsolete browsers (IE8) will require a polyfill not provided by this project.

Installation

Run ember install ember-validate-js in your Ember CLI application.

If you npm install this app, you'll need to run ember g ember-validate-js to ensure the dependencies are installed and set up (ember-browserify and ValidateJS).