项目作者: IvanGrimes

项目描述 :
Powerful pure Javascript form validator with a feature of adding your own validations
高级语言: JavaScript
项目地址: git://github.com/IvanGrimes/formhandler.js.git
创建时间: 2018-08-12T08:37:50Z
项目社区:https://github.com/IvanGrimes/formhandler.js

开源协议:MIT License

下载


``` After including formhandler.js with one of methods and adding HTML markup. Initialize formhandler.js instance in your Javascript file or inside ``


FormHandler 1.1.2










Powerful pure Javascript form validator with a feature of adding your own validations


Documentation |
Demo

  • Custom validations: you can add your own validations, just add them in the option object.
  • Highly customizable: has a powerful API and can be used however you want.
  • Built-in sender: has a built-in sender for a sending your form to the server through XMLHttpRequest or Fetch API.
  • EcmasScript 6: uses last features of Javascript.
  • MIT Licensed: free for personal and commercial use.

Getting started

formhandler.js has a few methods to connect to your project: CDN, npm or downloading latest release.

CDN

For using formhandler.js with CDN you need to include CSS in your <head> tag.

Instead x.x.x in formhandler.js@x.x.x put version from the top readme.
  1. <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/formhandler.js@x.x.x/dist/css/formhandler.min.css">

Also needed inclusion Javascript before closing <body> tag.

  1. <script src="//cdn.jsdelivr.net/npm/formhandler.js@x.x.x/dist/js/formhandler.min.js"></script>

npm

Firstly install formhandler.js package from npm.

  1. npm i -D formhandler.js

Include Javascript

If you’re using Webpack

In your Javascript file import formhandler.js.

  1. import FormHandler from 'formhandler.js';
If you’re not using Javascript bundler.

Then move formhandler.min.js from directory /node_modules/formhandler.js/dist/js/ in your project folder.
Include this one before closing <body> tag

  1. <script src="/path/to/dir/formhandler.min.js"></script>

Include CSS

If you’re Sass/SCSS or another CSS preprocessor.

Import slippery.min.css in your Sass/SCSS file using @import.

  1. @import "/node_modules/formhandler.js/dist/css/formhandler.min.css"

If you’re using another preprocessor, use equivalent of it.

If you’re not using CSS preprocessor.

Then just include formhandler.min.css inside of <head> tag.

  1. <link rel="stylesheet" href="/path/to/dir/formhandler.min.css">

Release

If you don’t want to use CDN and you don’t use npm, then you need to download latest release
from Releases.
After that unpack archive and move CSS/JS files from formhandler.js-x.x.x/dist/ to where you want to.
Finally include slippery.min.css inside <head> tag.

  1. <link rel="stylesheet" href="/path/to/dir/formhandler.min.css">

Also include formhandler.min.js before closing tag.

  1. <script src="/path/to/dir/formhandler.min.js"></script>

Using

HTML Markup

Every inputs must have an attribute name.
```html





Checkbox 1
Checkbox 2
Checkbox 3
Checkbox 4
Checkbox 5

Radio 1
Radio 2