formhandler.js

v1.1.2

Published

2 years ago

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

Downloads

0High
0Medium
0Low

grimescode

form validation form validation validator html5 javascript es6 ecmascript ecmascript6 bem plugin

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.

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/css/formhandler.min.css">

Also needed inclusion Javascript before closing <body> tag.

<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/js/formhandler.min.js"></script>

npm

Firstly install formhandler.js package from npm.

npm i -D formhandler.js

Include Javascript

If you're using Webpack

In your Javascript file import formhandler.js.

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

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

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

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

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

Also include formhandler.min.js before closing tag.

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

Using

HTML Markup

Every inputs must have an attribute name.

<form class="formhandler"
        action="#"
        method="POST">
  <div class="formhandler__notices"></div> <!-- For notice of the form -->
  <input class="formhandler__field" type="text" name="firstname" placeholder="First name">
  <input class="formhandler__field" type="text" name="lastname" placeholder="Last name">

  <select class="formhandler__field" name="select">
    <option value="">Choose...</option>
    <option value="option 1">Option 1</option>
    <option value="option 2">Option 2</option>
    <option value="option 3">Option 3</option>
    <option value="option 4">Option 4</option>
    <option value="option 5">Option 5</option>
  </select>

  <div>
    <input class="formhandler__field" type="checkbox" name="checkbox" value="Checkbox 1"> Checkbox 1
     <input class="formhandler__field" type="checkbox" name="checkbox" value="Checkbox 2"> Checkbox 2
     <input class="formhandler__field" type="checkbox" name="checkbox" value="Checkbox 3"> Checkbox 3
     <input class="formhandler__field" type="checkbox" name="checkbox" value="Checkbox 4"> Checkbox 4
     <input class="formhandler__field" type="checkbox" name="checkbox" value="Checkbox 5"> Checkbox 5
  </div>

  <div>
     <input class="formhandler__field" type="radio" name="radio" value="Radio 1"> Radio 1
     <input class="formhandler__field" type="radio" name="radio" value="Radio 2"> Radio 2
  </div>

  <textarea class="formhandler__field" name="message"
              cols="30" rows="10" placeholder="Message"></textarea>

  <button class="formhandler__submit" type="submit" name="submit">Submit</button>
</form>

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

Initialization

Every property of object fields must fit to value of the name attribute input tag. For example, if you have <input type="text" name="firstname> then for recognizing field object with options must have name is 'firstname'.

const formhandler = new FormHandler({
  fields: {
    firstname: {
      validation: 'isName',
    },
    lastname: {
      validation: 'isName',
    },
    select: {
      validation: 'isSelected',
    },
    checkbox: {
      validation: 'isCheckboxChecked',
    },
    radio: {
      validation: 'isRadioChecked',
    },
    message: {
      validation: 'isNonEmpty',
    },
  },
});

After that formhandler.js instance will be initialized with default settings.

API

Built-in validations

| Name | Support of min/max | Support of input types | Description |------------|--------------------|------------------------|--------------------------------------------| | isNonEmpty | Yes | Any (including textarea) | If input is not empty then it will be valid in range of min and max if it specified. | isName | Yes | Any text-like input types (including textarea) | If input contain only letters then it will be valid in range of min and max if it specified. | isEmail | Yes | Any text-like input types (including textarea) | If input contain valid email address (ex. [email protected]) then it will be valid in range of min and max if it specified. | isPhone | Yes | Any text-like input types (including textarea) | If input contain valid phone number then it will be valid in range of min and max if it specified. | isCheckboxChecked | Yes | checkbox | If any checkbox is checked, then it will be valid. If 'min' was specified, then you must check at least that number of checkboxes. If 'max' was specified, then you must check less or equal number of checkboxes. | isRadioChecked | No | radio | Any radio button in the group (radios with the same values of name attribute) must be checked. | isSelected | No | select | Selected 'options' of the 'select' tag must have value.

Adding your own validations | Demo

Custom validation must be a function that passes argument node (dom element). Function should return object with 'valid' property that contains result of validation (boolean) and 'message' property that contains string with a message of the notice.

Example:

const formhandler = new FormHandler({
  fields: {
    firstname: {
      validation: 'isName',
    },
    lastname: {
      validation: 'isName',
    },
    select: {
      validation: 'isSelected',
    },
    checkbox: {
      validation: 'isCheckboxChecked',
    },
    radio: {
      validation: 'isRadioChecked',
    },
    message: {
      validation: 'isCustom', // We're apply our custom validation to the field message (textarea tag)
    },
  },
  customValidations: {
    isCustom(node) {
      const pattern = /[a-z]/;
      let valid = pattern.test(node.value),
          message = 'iscustom invalid';

      return {
        valid,
        message,
      };
    },
  },
});