Git Product home page Git Product logo

horonzon / just-validate Goto Github PK

View Code? Open in Web Editor NEW

This project forked from horprogs/just-validate

0.0 0.0 0.0 1.55 MB

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. Support writing custom rules and plugins.

Home Page: https://just-validate.dev/

License: Other

Shell 0.02% JavaScript 0.64% TypeScript 61.21% CSS 6.02% HTML 32.10%

just-validate's Introduction

main image

codecov 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.


NOTE

This is documentation for JustValidate 2. If you are looking for the old version, you could find it here.


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

npm install just-validate --save

yarn

yarn add just-validate

And then use it as an imported module:

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:

<script src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js"></script>
<body>
  <script>
    const validate = new window.JustValidate('#form');
  </script>
</body>

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:

<form action="#" id="form" autocomplete="off">
  <label for="name">Enter your name</label>
  <input
    type="text"
    class="form__input form-control"
    placeholder="Enter your name"
    autocomplete="off"
    name="name"
    id="name"
  />
  <label for="email">Enter your email</label>
  <input
    type="email"
    class="form__input form-control"
    placeholder="Enter your email"
    autocomplete="off"
    name="email"
    id="email"
  />
  <button class="btn btn-primary" id="submit-btn">Submit</button>
</form>

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.

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.

just-validate's People

Contributors

dependabot[bot] avatar e-zrilova avatar horprogs avatar mymro avatar oxicode avatar semantic-release-bot avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.