Code Monkey home page Code Monkey logo

regulate-meteor's Introduction

Regulate for Meteor

A versatile validation library for the client and server.

View the main project here: http://github.com/eddflrs/regulate.js View a sample meteor project here: http://github.com/eddflrs/regulate-meteor-demo

Install via Meteorite

$: mrt add regulate.js

What it does

Regulate allows you to write your validation requirements once and use them on the client and server.

Features

  • Error message insertions into the DOM (optional)
  • Validates input type='file' fields (file sizes and types)
  • Customizable rules
  • i18n support

What it doesn't do

  • Regulate does not submit form data, it merely validates it and reports back with a result.
  • Regulate supports validations for fields that should match (like for passwords), but doesn't support fields whose validation requirements depend on the value of other fields.

Basic Usage

The form:

<form id="registerUser">
  <input type='text' name='username'/>
  <p id='username-error'></p>

  <input type='password' name='password1'/>
  <p id='password1-error'></p>
  
  <input type='password' name='password2'/>
  <p id='password2-error'></p>
  
  <input type='text' name='email'/>  
  <p id='email-error'></p>
    
  <input type='file' name='profileImage'/>
  <p id='profileImage-error'></p>
  
  <input type='submit'/>
</form>

The validation requirements can be shared by client and server by placing them in lib/validations.js or anywhere else outside of the client and server folders.

Regulate('registerUser', [
  {
    name: 'username',
    min_length: 3,
    max_length: 5,
    display_as: 'Username',
    display_error: '#username-error'
  }, {
    name: 'password1',
    min_length: 5,
    max_length: 12,
    display_as: 'Password',
    display_error: '#password1-error'
  }, {
    name: 'password2',
    match_field: 'password1',
    display_as: 'Confirmation',
    display_error: '#password2-error'
  }, {
    name: 'email',
    email: true,
    display_as: 'Email',
    display_error: '#email-error'
  }, {
    name: 'profileImage',
    max_size: 1024 * 10, //10kb
    accepted_files: 'jpeg|png',
    display_as: 'Profile image',
    display_error: '#profileImage-error'
  }
]);

On the client side, register an onSubmit callback to get validation results:

Meteor.startup(function () {
  Regulate.registerUser.onSubmit(function (error, data) {
    if (error) {
      console.log('Validation failed. These are the errors: ', error);
    } else {
      console.log('Validation passed. This is the data: ', data);
      // Send the data over to the server via an exposed Meteor method:
      Meteor.call('registerUser', data);
    }
  });
});

On the server side, expose an RPC method that will validate the form data:

Meteor.methods({
  registerUser: function (data) {
    Regulate.registerUser.validate(data, function (error, data) {
      if (error) {
        console.log('Server side validation failed.');
      } else {
        console.log('Server side validation passed!');
        // Save data to database or whatever...
      }
    });
  }
});

For more

Have a look at the main project's repo for more details on what rules are supported and how to register custom validation requirements.

http://github.com/eddflrs/regulate.js

For a meteor demo project: http://github.com/eddflrs/regulate-meteor-demo

regulate-meteor's People

Contributors

justinsgray avatar

Watchers

 avatar  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.