A general JavaScript validation tool with pre-configuration, Backbone support and can be used cross client/server
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
tests
Gruntfile.js
README.md
index.html
package.json

README.md

validate

A general JavaScript validation tool with pre-configuration, Backbone support and can be used cross client/server

Table of Contents

  1. How to use it
  2. Cross client and server
  3. Contribute

How to use it

There are four methods for you to play around with.

1. Config

  validate.config({
    errorMessages: {
      length: 'Need the correct length here Mr! % is wrong!' // Using % sets a placeholder
    }
  });

2. Validate

  var validation = validate({
    name: 'Christian Alfoni',
    zipCode: '3112',
    email: 'christianalfoni@gmail.com'
  }, {
    name: ['required'],
    zipCode: ['length:4', 'number'],
    email: ['email']
  });
  console.log(validation.isValid) // -> Returns true
  console.log(validation.errors) // -> Returns empty object
  
  var validation = validate({
    name: ''
  }, {
    name: ['required']
  });
  console.log(validation.isValid) // -> Returns false
  console.log(validation.errors) // -> Returns { name: ['You have to type something!'] }

3. Pre-configure validation

  validate.extend('person', {
     name: ['required'],
     zipCode: ['length:4', 'number'],
     email: ['email']     
  });
  
  validate('person', myPersonVariable);

4. Backbone model

This requires that you did step 3., created a pre-configured validator.

  var myModel = Backbone.Model.extend({
    defaults: {
      name: ''
    },
    validate: validate.backboneModel('person')
  });
  
  var aModel = new myModel();
  myModel.isValid(); // -> Returns false
  console.log(myModel.validationErrors) // -> Returns error object: { name: ['You have to type something!'] }

You can read more on actual use of this in an article I wrote: ???

Cross client and server

If you are running a Node JS server and want to share the validators you can do that by creating a validation module with your pre-configured validators. The module depends on this plugin. Here is en example:

define(['validate'], function (validate) {
  'use strict';
  validate.extend('message', {
      comment: ['required'],
      pointOfContact: ['required'],
      startTime: ['required', 'before:endTime'],
      endTime: ['required', 'after:startTime'],
      priority: ['required']
  });
  return validate;
});

This validation module can now be used both on the client and the server.

Contribute

To contribute to the project you can add new validators. I did not add the possiblity to add validators in the API because I want them all to be available to everyone. So if you want to use this small plugin, please add your new validators to this GIT project.

Adding a new validator

This is the "required" validator.

  ...
  required: function (value, data) {
    return value === undefined || value === null || (typeof value === 'string' && value.length === 0) ? errorMessages.required : true;
  },
  ...

All validators get at least two arguments. The first is the value to evaluate and the second is the whole dataset to evaluate. So f.ex.:

  validate({
    name: 'Christian Alfoni',
    email: 'christianalfoni@gmail.com'
  }, {
    name: ['required'],
    email: ['email']
  });

The "required" validator method would now get "Christian Alfoni" as the value and a data-object with both "name" and "email" property and their values. This makes it easy to cross validate one value with an other value in the dataset.

Advanced validators

When adding a colon (:) to the validator that will become an argument for you to handle. So lets look at the length validator:

  ...
  length: function (value, data, length) {
    var length = Number(length);
    return value.length === length ? true : errorMessages['length'].replace('%', length.toString());
  },
  ...

Here we get a length argument, which is changed to a number and then used to validate. The validation was run like this:

  validate({
    zipCode: '3112'
  }, {
    zipCode: ['length:4']
  });

By adding more colons you will get more arguments passed to your validation method.

Adding error message to your validator

You add a default errorMessage in the errorMessages object. By using a % in the string you add a placeholder, which can be used in your validator like this:

  ...
  length: function (value, data, length) {
    var length = Number(length);
    return value.length === length ? true : errorMessages['length'].replace('%', length.toString());
  },
  ...
  errorMessages = {
    length: 'Length should be %',
  ...

You just replace the % in the string with whatever value you want.

Starting up project

Just run npm install in the root of the project to get the deps. Run grunt to start a web server and hit localhost:9001 in your browser to test the index.html file in the root.

Testing and deploying

Write a test for your validator in the tests/specs/validate.test.js file, here is an example from the file:

  ...
    /*
   *
   * EMAIL validator
   *
   */
  describe('email validator', function() {
      it('should fail on missing property', function() {
          var validation = validate({
          }, {
              email: ['email']
          });
          validation.isValid.should.be.false;
          validation.errors.email[0].should.equal(missingDataError);
      });
      it('should fail when not an email', function() {
          var validation = validate({
              email: 'test@test'
          }, {
              email: ['email']
          });
          validation.isValid.should.be.false;
          validation.errors.email[0].should.equal('Not valid email');
      });
      it('should succeed when is a valid email', function() {
      var validation = validate({
          email: 'test@test.no'
      }, {
          email: ['email']
      });
      validation.isValid.should.be.true;
  });
  ...

When you have written your test, run grunt test in your terminal. To deploy it, run grunt deploy.