Convert Figma logo to code with AI

rickharrison logovalidate.js

Lightweight JavaScript form validation library inspired by CodeIgniter.

2,560
401
2,560
32

Top Related Projects

String validation

validate form asynchronous

21,115

The most powerful data validation library for JS

Quick Overview

validate.js is a lightweight JavaScript form validation library. It provides a simple and flexible way to validate form inputs on the client-side, with support for custom validation rules and error messages.

Pros

  • Lightweight and dependency-free
  • Highly customizable with support for custom validation rules
  • Easy to integrate with existing forms and JavaScript projects
  • Supports both synchronous and asynchronous validation

Cons

  • Limited built-in validation rules compared to some larger libraries
  • Documentation could be more comprehensive
  • No built-in support for complex form structures or nested objects
  • Lacks some advanced features found in more robust validation libraries

Code Examples

  1. Basic form validation:
var constraints = {
  email: {
    presence: true,
    email: true
  },
  password: {
    presence: true,
    length: {
      minimum: 6,
      message: "must be at least 6 characters"
    }
  }
};

var form = document.querySelector("form");
var errors = validate(form, constraints);

if (errors) {
  // Handle errors
} else {
  // Form is valid
}
  1. Custom validation rule:
validate.validators.customRule = function(value, options, key, attributes) {
  if (value !== "expected value") {
    return "is not the expected value";
  }
};

var constraints = {
  field: {
    customRule: true
  }
};
  1. Asynchronous validation:
validate.async(form, constraints).then(
  function() {
    // Success callback
  },
  function(errors) {
    // Error callback
  }
);

Getting Started

  1. Install validate.js:

    npm install validate.js
    
  2. Include the library in your project:

    import validate from 'validate.js';
    
  3. Define your constraints and validate a form:

    const constraints = {
      username: {
        presence: true,
        length: { minimum: 3 }
      },
      email: {
        presence: true,
        email: true
      }
    };
    
    const form = document.querySelector('form');
    const errors = validate(form, constraints);
    
    if (errors) {
      // Display errors to the user
    } else {
      // Form is valid, proceed with submission
    }
    

Competitor Comparisons

String validation

Pros of validator.js

  • More comprehensive set of validation rules and functions
  • Better support for internationalization and localization
  • Active development and larger community support

Cons of validator.js

  • Larger file size and potentially higher overhead
  • May require more setup and configuration for complex validations

Code Comparison

validate.js:

var validator = new Validator({
  name: 'required|min:3|max:50',
  email: 'required|email',
  age: 'required|integer|min:18'
});

if (validator.passes()) {
  // Validation passed
}

validator.js:

const v = new Validator({
  name: 'John Doe',
  email: 'john@example.com',
  age: 28
}, {
  name: 'required|min:3|max:50',
  email: 'required|email',
  age: 'required|integer|min:18'
});

if (v.passes()) {
  // Validation passed
}

Both libraries offer similar syntax for defining validation rules, but validator.js provides more flexibility in terms of customization and extensibility. validate.js is more lightweight and straightforward, while validator.js offers a broader range of features and better internationalization support. The choice between the two depends on the specific requirements of your project, such as the complexity of validations needed and the importance of localization.

validate form asynchronous

Pros of async-validator

  • Supports asynchronous validation out of the box
  • Offers a more flexible and extensible rule system
  • Provides built-in support for nested object validation

Cons of async-validator

  • Steeper learning curve due to more complex API
  • Less comprehensive documentation compared to validate.js
  • Smaller community and fewer resources available online

Code Comparison

validate.js:

var constraints = {
  email: {
    presence: true,
    email: true
  }
};

validate({email: "invalid"}, constraints);

async-validator:

const descriptor = {
  email: [
    { type: 'email', required: true }
  ]
};

const validator = new Schema(descriptor);
validator.validate({ email: 'invalid' }, (errors, fields) => {
  if (errors) {
    // Validation failed
  }
});

Both libraries offer form validation capabilities, but async-validator provides more advanced features at the cost of increased complexity. validate.js has a simpler API and better documentation, making it easier for beginners to use. However, async-validator's support for asynchronous validation and nested object validation makes it more suitable for complex applications. The code comparison shows that async-validator requires more setup but offers more flexibility in defining validation rules.

21,115

The most powerful data validation library for JS

Pros of Joi

  • More comprehensive and feature-rich validation library
  • Better support for complex object structures and nested validations
  • Active development and maintenance with frequent updates

Cons of Joi

  • Steeper learning curve due to its extensive API
  • Larger bundle size, which may impact performance in browser environments

Code Comparison

Validate.js:

var constraints = {
  username: {
    presence: true,
    length: { minimum: 3 }
  },
  email: {
    presence: true,
    email: true
  }
};

Joi:

const schema = Joi.object({
  username: Joi.string().min(3).required(),
  email: Joi.string().email().required()
});

Summary

Joi offers a more powerful and flexible validation solution, with better support for complex data structures and a wider range of validation options. However, this comes at the cost of a steeper learning curve and larger bundle size. Validate.js, while simpler and lighter, may be more suitable for smaller projects or when browser performance is a critical concern. The code comparison shows that Joi's syntax is more concise and intuitive for defining schemas, while Validate.js uses a more declarative approach. Ultimately, the choice between the two depends on the specific requirements of your project and the trade-offs you're willing to make between functionality and simplicity.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

validate.js

validate.js is a lightweight JavaScript form validation library inspired by CodeIgniter.

Features

  • Validate form fields from over a dozen rules
  • No dependencies
  • Customizable Messages
  • Supply your own validation callbacks for custom rules
  • Chainable customization methods for ease of declaration
  • Works in all major browsers, (even IE6!)
  • Modeled off the CodeIgniter form validation API

How to use

    var validator = new FormValidator('example_form', [{
        name: 'req',
        display: 'required',
        rules: 'required'
    }, {
        name: 'alphanumeric',
        rules: 'alpha_numeric'
    }, {
        name: 'password',
        rules: 'required'
    }, {
        name: 'password_confirm',
        display: 'password confirmation',
        rules: 'required|matches[password]'
    }, {
        name: 'email',
        rules: 'valid_email'
    }, {
        name: 'minlength',
        display: 'min length',
        rules: 'min_length[8]'
    }, {
        names: ['fname', 'lname'],
        rules: 'required|alpha'
    }], function(errors) {
        if (errors.length > 0) {
            // Show the errors
        }
    });

Documentation

You can view everything at http://rickharrison.github.com/validate.js

Browserify

It is published to npm under validate-js

npm install validate-js

Plugins

jQuery: https://github.com/magizh/validate_helper

Multi-Language Support

jnhwkim's fork added multi-language support viewable at https://github.com/jnhwkim/validate.js

Chinese - https://github.com/chilijung/validate.js

French - https://github.com/Facyla/validate.js

Brazilian Portuguese - https://github.com/fabiowitt/validate.js

ghit.me

NPM DownloadsLast 30 Days