just-validate


Modern, simple, lightweight (~5kb gzip) form validation library written in Typescript, with no dependencies (no JQuery!).
Support a wide range of predefined rules, async, files, dates validation, custom error messages and styles, localization.
Supporting writing custom rules and plugins.

Why JustValidate?

It's a right choice for you, if you have a site, a landing page without React, JQuery etc.
and you want to quick, simple and powerful solution for validating your form.

Features

* small size and zero dependencies
* no need to change your HTML
* a wide range of pre-defined rules
* custom rules
* support plugins
* custom styles and css classes for invalid fields and error messages
* custom messages
* showing tooltips as error messages
* custom places for the error labels
* localization (defining error messages for different languages)
* user-friendly setup: console warning messages if something incorrect
* written in Typescript and good test coverage

Installation

$3

``shell
npm install just-validate --save
`

$3

`shell
yarn add just-validate
`

And then use it as an imported module:

`js
import JustValidate from 'just-validate';

const validate = new JustValidate('#form');
`

Or if you don't use module bundlers, just include JustValidate script on your page from CDN and call it as window.JustValidate:

`html




`

Predefined rules

There are plenty of rules which you could use out of the box:

* required, non-empty fields
* valid email address
* min/max text length
* valid number
* min/max number
* valid password
* valid strong password
* check for the custom regexp
* min/max count of uploaded files
* min/max size, types, extensions, names of uploaded files
* format date, check for isAfter/isBefore dates

Quick start

Let's say we have a basic HTML layout:

`html



Enter your name
type="text"
class="form__input form-control"
placeholder="Enter your name"
autocomplete="off"
name="name"
id="name"
/>
Enter your email
type="email"
class="form__input form-control"
placeholder="Enter your email"
autocomplete="off"
name="email"
id="email"
/>
Submit



`

Next, let's add JustValidate to our layout and define some simple rules.

First, we should create the instance new JustValidate('#form') by passing a form selector, or the element as an argument.

Second, we call .addField() with a field selector as the first argument and an array of rules as the second argument.

`js
const validation = new JustValidate('#form');

validation
.addField('#name', [
{
rule: 'minLength',
value: 3,
},
{
rule: 'maxLength',
value: 30,
},
])
.addField('#email', [
{
rule: 'required',
errorMessage: 'Email is required',
},
{
rule: 'email',
errorMessage: 'Email is invalid!',
},
]);
``

And that's it! Now our form is validated!

More

Please, check out the examples and documentation. Or try the playground.