DEV Community: Malkhazi Dartsmelidze

Simple and lightweight way to validate javascript object using max-validator

Malkhazi Dartsmelidze — Fri, 22 May 2020 07:09:38 +0000

Hello, I hope you have seen my first article about max-validator where I talk about this library and the way to use it.

Today I released max-validator's update and it became more flexible and compatible for almost every requirement. 🥰

First of all lets talk about how install and use max-validator and then I'll introduce you to updates.

Installation is like every other npm package:

npm i max-validator --save
# or
npm install max-validator --save 
# or using yarn
yarn add max-validator

Then you can use it with only one method call:

import V from 'max-validator';
V.validate(data, validationScheme);

Where data is simple javascript object containing data to validate and validationScheme is object where keys are data keys and values are scheme rules.

Let's see example how we can validate user registration form:

var validationScheme = {
  name: 'required|min:3|max:50|alpha',
  lastname: 'required|min:3|max:50|alpha',
  email: 'required|email|ends_with:gmail.com',
  birthdate: 'required|date',
  address: 'required|string|max:100|contains_one:st,str,ave,avenue,#',
  password: 'required|min:6|alpha_num',
  age: 'required|between:18,70|number'
};

var result = V.validate({
  name: 'Malkhazi', 
  lastname: 'Dartsmelidze', 
  email: 'examplemail@gmail.com',
  birthdate: '1997-17-07',
  age: 22,
  address: 'Rustaveli Avenue #333',
  password: '12345678',
  password_confirm: '12345678',
}, validationScheme);

I thought it already was very simple and compact but I realized that I was wrong then I decided to add new features to it and make it very flexible, usable and full validation library, so I did it.

First see minor changes:
In version max-validator@1.1.0 I added and changed a few validation rules:

contains_one
contains_all
numeric
alpha_numeric

And now lets talk about Major Changes:

You can pass array of rules in Validation scheme:

V.validate(data, {
  name: ['required', 'min:3', 'max:50', 'alpha'],
  email: ['required', 'email', 'ends_with:gmail.com'],
});

You can pass object of rules in Validation scheme:

V.validate(data, {
  name: {
    required: true,
    min: 3,
    max: 50,
    alpha: true
  },
  email: {
    required: true,
    email: true,
    max: 50,
    ends_with: 'gmail.com'
  }
});

In this way rules are more readable, 🧐 flexible and it has major advantage - Conditional Rules:

V.validate(data, {
  name: ['required', 'min:3', 'max:50', canWriteNickname ? 'alpha_numeric' : 'alpha'],
  email: ['required', 'email', requiredGmailEmail ? 'ends_with:gmail.com' : ''],
});

In max-validator@1.0 we couldn't validate whether email or nickname was unique or address was correct address or not,

But now you can do it with inline or predefined validation functions.
Lets see how it works:

function checkIfEmailIsUnique(value){
  var response = checkEmail(value)
  if(response.isUnique) {
    return true;
  }

  return 'Sorry, this email is already used';
}

V.validate(data, {
  name: ['required', 'min:3', 'max:50', canWriteNickname ? 'alpha_numeric' : 'alpha'],
  email: ['required', 'email', requiredGmailEmail ? 'ends_with:gmail.com' : '', checkIfEmailIsUnique, function(value){
    /* You can pass as many inline functions as you want */
    return 'Just return true if value is valid or return string if you want to get error';
  }],
  nickname: {
    required: true,
    alpha_numeric: true,
    max: 50,
    checkNickname: function(value){
      var response = checkEmail(value)
      if(response.isUnique) {
        return true;
      }

      return 'Nickname not aviable';
    }
  }
});

Pretty interesting, huh? 😍

But what about password confirmation, which is very important input for registration form? 🙄 Or what about whether age is correct relative to birthdate? 🙄
max-validator@1.1.0 - Challenge accepted 😎

Simply pass second argument in function and you get entire validation data:

var result = V.validate({
  name: 'Malkhazi', 
  lastname: 'Dartsmelidze', 
  email: 'examplemail@gmail.com',
  birthdate: '1997-17-07',
  age: 22,
  address: 'Rustaveli Avenue #333',
  password: '12345678',
  password_confirm: '12345678',
}, {
  ...
  password: 'required|min:6|alpha_numeric',
  password_confirm: [
    function(value, data){
      if(value === data.password) return true;

      return 'Passwords didn\'t match'
    }
  ],
  age: {
    required: true,
    between: [18, 70],
    validateIfCorrect: function(value, data){
      if(value != moment().diff(moment(value.date, 'YYYY-MM-DD'), 'years')) {
        return 'Age or birthdate is incorrect';
      }
      return true;
    }
  }
});

max-validator is not even 2.5KB in size which is extremly important in front-end applications.

My next major goals is to integrate it with other libraries like: Formik, react-hook-form and others.

Note: Formik validator Yup is 30KB and react-hook-form's validator joi is 41KB

Oh, I almost forgot to write how to use max-validator with React.js.

Before that, lets learn how to get errors:

var result = Validator.validate(data, validationScheme);

// Get if validate returned error
result.hasError; // Boolean

// Get errors object
result.errors; // Object

// Get if given field has error
result.isError('name'); // Boolean

// Get if given field has error of given validation rule
result.isError('name', 'max'); // Boolean
result.isError('name', 'myCustomFunctionNamePassedInArrayOrObject'); // Boolean
// Note: you cant get whether inline function passed validation or not

// Get first validation error message of field
result.getError('name'); // String

// Get all validation error messages of field
result.getError('name', true); // String (joined messages with comma)

Now use it in React.js:

import React from 'react';
import V from 'max-validate';

const LoginForm = (props) => {
  const [formState, setFormState] = React.useState({
    isValid: false,
    values: {},
    touched: {},
    errors: V.empty(),
  });

  useEffect(() => {
    const result = V.validate(formState.values, {
      email: 'required|email',
      password: 'required|min:6'
    });

    setFormState((formState) => ({...formState,
      isValid: result.hasError,
      errors: result.hasError ? result : V.empty(),
    }));
  }, [formState.values]);

  const handleChange = (event) => {
    event.preventDefault();

    setFormState((formState) => ({ ...formState,
      values: { ...formState.values,
        [event.target.name]: event.target.value,
      },
      touched: {...formState.touched,
        [event.target.name]: true,
      },
    }));
  };

  const hasError =  (field) => (formState.touched[field] && formState.errors.isError(field));

  return (
    <form>
      <input hasError={hasError('email')} name="email" onChange={handleChange} />
      <input hasError={hasError('password')} name="password" onChange={handleChange} />
      <button disabled={!formState.isValid}>Login</button>
    </form>
  );
}

Thank you for reading this article, I hope you liked it.
If so, please Share this article Star and Watch Guthub Repository to get notifications about changes and realeases, this helps me sooooo much.

The easy and lightweight way to validate data in React Components & Node.js

Malkhazi Dartsmelidze — Tue, 19 May 2020 22:13:44 +0000

👉 Click here to see new update about this package

Hi, I always wanted to write an article on dev.to and this is my first post about my very first package on npm and of course I'm very excited about it.

First of all I'll introduce you myself. I am full stack software engineer with two year experience writing code using PHP, Laravel, Node.js, React.js, Golang and etc.

Today I want to tell you about my package: max-validator

max-validator is very simple, lightweight (only 2.1kb gzipped), and highly customizable solution to validate javascript object and React.js forms as well.

To install max-validator just run following command in your terminal:

$ npm install --save max-validator

Then use it in your Component or node.js request Handler:

import V from 'max-validate';

const examplePerson = {
  name     : 'John',
  lastname : 'Doe',
  birthdate: '1997-07-17',
  age      : 22,
  email    : 'johndoe@gmail.com',
};

const result = V.validate(examplePerson, {
  name     : 'required|string|min:2|max:30',
  lastname : 'required|string|min:2|max:30',
  birthdate: 'required|date',
  age      : 'required|numeric|min:18|max:100',
  email    : 'required|email|max:50',
});

V.validate() function receives only 2 parameters

First parameter must be javascript object containing info to validate
Second parameter must be correct scheme which validates above data

Validation scheme contains rules with parameters separated by | symbol.

By default max-validator comes with predefined rules:

min {age: 'required|min:18' }
max {:height: 'required|max:250' }
between {age: 'required|between:18,50' }
checked {privacy_policy: 'required|checked' }
object {info: 'required|object' }
array {points: 'required|array' }
boolean {isStudent: 'required|boolean' }
alpha_numeric {phoneNumber: 'required|alpha_numeric' }
alpha {name: 'required|alpha' }
email {email: 'required|email' }
alpha_dash {slug: 'required|alpha_dash' }
in_array {gender: 'required|in_array:male,female' }
not_in {status: 'required|not_in:declined' }
json {data: 'required|json' }
ip {:ipAdress: 'required|ip' }
url {:website: 'required|url' }
equals {type: 'required|equals:person' }
not_equals {currency: 'required|not_equals:eur' }
starts_with {certificate: 'required|starts_with:iso_' }
ends_with {email: 'required|ends_with:gmail.com' }
date {birthdate: 'required|date' }

And 4 additional rules to validate data:

required - Returns error if value is not present or is null or empty
nullable - Does not returns error if value is empty, undefined, or null
string - Passes value into validator as string
numeric - Passes value intro validator as number

Here you can see more about rule and its parameters.

To validate data you have to call validate method like this: V.validate(data, scheme) which returns object containing following fields:

hasError - Boolean that represents whether validation failed or not

const result = V.validate(data, scheme);
consol.log(result.hasError); // true or false

isError - Function that returns if validation failed for specifig field

const result = V.validate(data, scheme);
consol.log(result.isError('name')); // true or false
consol.log(result.isError('name', 'max')); // true or false (To know validator failed for max length reason)

getError - Function that returns first or all error message of specifig field

const result = V.validate(data, scheme);
consol.log(result.getError('name')); // name is required
consol.log(result.getError('name', true)); // name is required, name must contain at least 3 characters

It is very simple to extend max-validator and add your own rule as well.
For example you want to check if given value is array and array length is greater than given param:

import V from 'max-validator';

/**
 * You can add as many params as you want or spread params using spread operator ...params
 * @param {string} RuleName
 * @param {function} ValidatorFunction
 * @param {?string} ErrorMessage
 */
V.extend('custom_array', function(value, min_length){
  const err = { min_length: min_length }

  if(Array.isArray(value) && value.length <= min_length ) {
    return true;
  }

  return err;
}, 'array is invalid, it must have at least :min_length elements');
// You can pass value in message as well

Then you can use rule which was created above:

import V from 'max-validator'

const result = V.validate({data: [1, 2, 3, 4] }, {data:'required|array|custom_array:5'});

console.log(result.hasError, result.isError('data'), result.getError('data'));
// true, true, array is invalid, it must have at least 5 elements

Now you know how to extend validator and handle errors as well, isn't it very simple?

You can also simply override default messages too with setMessages method, where object keys are rule names:

import V from 'max-validate';

V.setMessages({
  required: 'value is required',
  min: 'Minimum value for :name is not met'
  ...
});

V.setDefaultMessage('Something is invalid in your data');

As I said above max-validate is compatible with React.js too.
Here is very simple code to validate user login form:

import React from 'react';
import V from 'max-validate';

const LoginForm = (props) => {
  const [formState, setFormState] = React.useState({
    isValid: false,
    values: {},
    touched: {},
    errors: V.empty(),
  });

  useEffect(() => {
    const result = V.validate(formState.values, {
      email: 'required|email',
      password: 'required|min:6'
    });

    setFormState((formState) => ({...formState,
      isValid: result.hasError,
      errors: result.hasError ? result : V.empty(),
    }));
  }, [formState.values]);

  const handleChange = (event) => {
    event.preventDefault();

    setFormState((formState) => ({ ...formState,
      values: { ...formState.values,
        [event.target.name]: event.target.value,
      },
      touched: {...formState.touched,
        [event.target.name]: true,
      },
    }));
  };

  const hasError =  (field) => (formState.touched[field] && formState.errors.isError(field));

  return (
    <form>
      <input hasError={hasError('email')} name="email" onChange={handleChange} />
      <input hasError={hasError('password')} name="password" onChange={handleChange} />
      <button disabled={!formState.isValid}>Login</button>
    </form>
  );
}

If you want to learn more about max-validator you can look at Github repository and feel free to contribute as well.

Thanks a lot for your interest, I hope you enjoyed it