DEV Community

HarveyDanger
HarveyDanger

Posted on

Vasilisk.js - Powerful HTML input validation tool

TL;DR

Vasilisk is a node.js module that allows you to incorporate HTML input validation on the fly. Original repo can be found here

What's the purpose?

Vasilisk is the lightweight tool that allows you to validate field values and logic groups (forms, but without form tag) on the fly.

Features:

  1. Write once, use anywhere - if you may think of any rough validation, say dates between, you can easily write that function once and apply it to as many fields as you want
  2. Create Virtual Forms - Vasilisk allows you to combine inputs of any kind to the logical group. This group is validated and fail|success callbacks are triggered once the form is completed or failed respectively.
  3. Easy to setup settings please refer to the example below
  4. No dependencies
  5. Lightweight
  6. No busy waiting because of standard js event loop utilisation

Ready to make your hands dirty?

Vasilisk can be obtained to your project in a classic way... bruh

npm install vasilisk

Quick project setup (may skip if familiar with webpack and babel minimal setup)

  1. cd into the directory of your preference e.g. cd ~/Documents/Projects
  2. In your terminal write:
mkdir vasilisk_demo && cd vasilisk_demo && npm init -y; \
npm install vasilisk && npm install babel-cli babel-preset-env --save-dev; \
npm install webpack webpack-dev-server webpack-cli --save-dev; \
mkdir src; touch src/main.js; echo "const path=require(\"path\");module.exports={mode:\"development\",entry:\"./src/main.js\",output:{path:path.resolve(__dirname,\"public\"),filename:\"bundle.js\"},devServer:{contentBase:path.join(__dirname,\"public\"),compress:true,port:8989}};" > webpack.config.js; echo "{\"presets\":[[\"env\",{\"targets\": {\"browsers\": [\"last 2 versions\", \"safari >= 7\"]}}]]}" > .babelrc; \
mkdir public; touch public/index.html;
  1. In the package.json file, add new script instructions:
"scripts": {
   "build": "webpack --config webpack.config.js",
   "start": "npm run build && webpack-dev-server"
}

Example

  • Navigate to public/index.html file and paste the following snippet. Basically it is a simple web page with 3 input fields
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vasilisk demo</title>
</head>
<body>
    <input type="number" name="one" id="one">
    <input type="text" name="two" id="two">
    <input type="text" name="three" id="three" value="bar">
    <script src="./bundle.js"></script>
</body>
</html>
  • In your src/main.js insert the following snippet
import { Vasilisk } from 'vasilisk';

const v = new Vasilisk({
    callBackOnEveryValid: true
})

v.CreateGroup(
    'inp-group', // Group ID
    (gid) => { // Success callback
        alert("All fields are just fine")
    },
    (gid, failed) => { // Fail callback
        alert(`Bugga, ${failed[0].e.internal.name} has incorrect value`)
    }, [{ // Input fields
            id: 'one', // DOM id
            validation: (elem) => { // validation rule, must return bool
                return elem.value >= 5
            },
            failed: (elem) => { // what to do if validation failed
                alert(`Input one can be only 5+, your input is ${elem.value}`)
            }
        },
        { // Input fields
            id: 'two', // DOM id
            validation: (elem) => { // validation rule, must return bool
                return elem.value === "foo"
            },
            failed: (elem) => { // what to do if validation failed
                alert(`Incorrect secret word ${elem.value}, should be foo`)
            }
        },
        { // Input fields
            id: 'three', // DOM id
            validation: (elem) => { // validation rule, must return bool
                return elem.value === "bar"
            },
            pristine: true, // Identifies that by default, on DOM load, this field is correct and valid
            failed: (elem) => { // what to do if validation failed
                alert(`Incorrect secret word ${elem.value}, should be bar`)
            }
        }
])
  • Now run webpack development server by executing npm start and follow the link: http://localhost:8989/ in your browser.

That was easy, wasn't it? =).

All other useful features can be found in the repo

Thanks for the reading, next chapter will have Restorator.js introduction.

Top comments (0)