npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

easy-validator-js

v1.0.18

Published

Easy validation of forms in using javascript

Downloads

3

Readme

Easy ValidatorJs

Codecov Coverage

Provides an easy way to validate forms and gives custom error messages. Ideal with frameworks like ReactJs with Redux and VueJs with Vuex

Motivation

Defining logic for validation in components gets messy sometimes as your component is already doing a lot of things. The idea is to have a central place where all the validation related logic lives and component has to only call that logic and listen to it.

    components
        ExampleForm.js
    Rules
        ExampleRules.js
    Store (Reducer in of Redux)
        Validation.js

Installation by npm

$ npm install easy-validator-js --save

Usage Example

import {Validator} from 'easy-validator-js';


function validateTestData(data)
{
    const {email, username, first_name} = data;

    //creating a validator object
    const validator = new Validator();

    /*
     * validate accepts an object, something like
     * validate({
     *		keyName1 : [ keyValue1, 'condition1','condition2' ],
     *		keyName2 : [ keyValue2, 'condition3','condition4' ]
     *	})
     */
    const {errors, isValid} = validator.validate({
	    email : [email,'isRequired','isEmail'],
	    username : [username,'isRequired'],
	    first_name : [first_name,'isRequired','max(20)','min(5)']
    });

    /*
     * errors will be an array of object, something like
     * [email: "this field is required", username : "this field is required", first_name:"this field is required"]    
     */
    return {errors, isValid};
}

Available Validations

  • isRequired
  • max(int)
  • min(int)
  • isEmail
  • isAlpha
  • isAlphaNumeric
  • isNumber
  • maxValue
  • minValue
  • passwordMatch
  • shouldNotMatch
  • isDate
  • isMobile
  • isValidWithRegex
  • isUrl
  • isValidUserName

Default Messages

* this_field_is_required 	: this field is required
* max_length_exceeded   	: maximum length exceeded
* not_enough_length 		: too short
* invalid_email 		: invalid email
* not_alpha 			: input should only consist of alphabets
* not_alphanumeric 		: input should only consist of alphabets and numbers
* invalid_number 		: input should only consist of numbers
* more_than_max_value 		: maximum value exceeded
* less_than_min_value 		: too small
* password_is_same 		: new password is same as old. Please choose a different password
* password_does_not_match 	: Password does not match
* invalid_date 			: not a valid date
* invalid_mobile 		: invalid mobile number
* invalid_string         : passed string does not match the valid pattern
* invalid_url       : not a valid url
* invalid_username: invalid username,

Create your own custom messages

By default there are fixed validation messages which you can find in the next section, but it can be customized to get custom validation messages by passing a method while creating the object. Like so:

import {Validator} from 'easy-validator-js'

function getMessage(key){
	//return message based on key
}

//passing method to the class
const validator = new Validator(getMessage);

getMessage will recieve following keys :

* this_field_is_required
* max_length_exceeded
* not_enough_length
* invalid_email
* not_alpha
* not_alphanumeric
* invalid_number
* more_than_max_value
* less_than_min_value
* password_is_same
* password_does_not_match
* invalid_date
* invalid_mobile
* invalid_string
* invalid_url
* invalid_username

Now, you can give whatever value you want to give to when any of the above key is passed. The easiet way of doing it is by creating and importing a javascript array which has keys as above and value as your custom message. Something like this :

export const customMessages = {

    this_field_is_required: "custom message",

    max_length_exceeded: "custom message",

    not_enough_length: "custom message",

    invalid_email: "custom message",

    not_alpha: "custom message",

    not_alphanumeric: "custom message",

    invalid_number: "custom message",

    more_than_max_value: "custom message",

    less_than_min_value: "custom message",

    password_is_same: "custom message",

    password_does_not_match: "custom message",

    invalid_date: "custom message",

    invalid_mobile: "custom message",

    invalid_string: "custom message",

    invalid_url: "custom message",

    invalid_username: "custom message",
};

Save this file with some name let's say messages.js Now, import messages and use it in getMessage() function

import {customMessages} from 'messages'
import {Validator} from 'easy-validator-js'

function getMessage(key){
    return customMessages[key];
}

//passing method to the class
const validator = new Validator(getMessage);

Finally, you are all set up for seeing your own custom messages

Messages coming from language file (in case of laravel with vue)

You can create the above message keys in your language file and make a function which simply gives the values corresponding to the given key and pass the same function as class arguments like so:

import {Validator} from 'easy-validator-js'

function getMessage(key){
    //get the value of the passed key from language file
}

//passing method to the class
const validator = new Validator(getMessage);

Use Case

Let's say you want to validate your form at the time of form submission and you are using a state manager like Redux or Vuex. Now, create a file let's say ExampleRules.js, in which all your rules related to a particular form will live.

//exampleRules.js

import {Validator} from 'easy-validator-js';
import {store} from 'store/store'; //your redux or vuex store

function validateExampleData(data)
{
    const {email, username, first_name} = data;

    const validator = new Validator();
    const {errors, isValid} = validator.validate({
	email : [email,'isRequired','isEmail'],
	username : [username,'isRequired'],
	first_name : [first_name,'isRequired','max(20)','min(5)']
    });

    store.dispatch('VALIDATION_ERRORS', errors); //populating the store with errors
    return isValid;
}

Now, while submitting your form you can do something like this this:

import {validateExampleData} from 'exampleRules.js'

export default{
    onSubmit(){
        if(isValid()){
	    //submit your form
        }
    }

    isValid(){
	if(validateExampleData(this.$data)) { //for ReactJs it will be this.state
	    return true;	    
	}
	return false;
    }

}

At the same time, your component can listen to Redux/Vuex store for errors.

Passing custom message with each rule

import {Validator} from 'easy-validator-js';


function validateTestData(data)
{
    const {email, username, first_name} = data;

    //creating a validator object
    const validator = new Validator();

    /*
     * validate accepts an object, something like
     * validate({
     *      keyName1 : [ keyValue1, 'condition1','condition2' ],
     *      keyName2 : [ keyValue2, 'condition3','condition4' ]
     *  })
     */
    const {errors, isValid} = validator.validate({
        email : [email,{'isRequired': 'this field is required'}, {'isEmail':'invalid email'}],
        username : [username, {'isRequired': 'this field is required'}],
        first_name : [first_name,{'max(20)':'max length exceeded'}, {'min(5)':'min length not satisfied'}]
    });

    /*
     * errors will be an array of object, something like
     * [email: "this field is required", username : "this field is required", first_name:"this field is required"]    
     */
    return {errors, isValid};
}   

Test

Run test by simply typing npm test from the root directory of this package.

Contribute on github

Clone this repository( https://github.com/avinash403/easy-validator-js.git ), make your changes and raise a pull request to development branch