JustValidate

Modern, simple, lightweight (~5kb gzip) form validation library written in ...

Form
horprogs/Just-validatejust-validate.dev/just-validate

README

Screenshot 2023-01-16 at 23 35 59


[![codecov](https://codecov.io/gh/horprogs/Just-validate/branch/master/graph/badge.svg?token=O6DXXL5TUU)](https://codecov.io/gh/horprogs/Just-validate)
npm
Codacy Badge
Known Vulnerabilities
Release workflow

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


npm


  1. ```shell
  2. npm install just-validate --save
  3. ```

yarn


  1. ```shell
  2. yarn add just-validate
  3. ```

And then use it as an imported module:

  1. ```js
  2. import JustValidate from 'just-validate';

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

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

  1. ```html
  2. <script src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js"></script>
  3. <body>
  4.   <script>
  5.     const validate = new window.JustValidate('#form');
  6.   </script>
  7. </body>
  8. ```

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:

  1. ```html
  2. <form action="#" id="form" autocomplete="off">
  3.   <label for="name">Enter your name</label>
  4.   <input
  5.     type="text"
  6.     class="form__input form-control"
  7.     placeholder="Enter your name"
  8.     autocomplete="off"
  9.     name="name"
  10.     id="name"
  11.   />
  12.   <label for="email">Enter your email</label>
  13.   <input
  14.     type="email"
  15.     class="form__input form-control"
  16.     placeholder="Enter your email"
  17.     autocomplete="off"
  18.     name="email"
  19.     id="email"
  20.   />
  21.   <button class="btn btn-primary" id="submit-btn">Submit</button>
  22. </form>
  23. ```

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.

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

  4. validation
  5.   .addField('#name', [
  6.     {
  7.       rule: 'minLength',
  8.       value: 3,
  9.     },
  10.     {
  11.       rule: 'maxLength',
  12.       value: 30,
  13.     },
  14.   ])
  15.   .addField('#email', [
  16.     {
  17.       rule: 'required',
  18.       errorMessage: 'Email is required',
  19.     },
  20.     {
  21.       rule: 'email',
  22.       errorMessage: 'Email is invalid!',
  23.     },
  24.   ]);
  25. ```

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

More


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