Vasilisk.js - Powerful HTML input validation tool
Tags: validation, htmlinput, javascript, npmmodule
Published: 2019-10-04 03:48:42

---
title: Vasilisk.js - Powerful HTML input validation tool
published: true
description: HTML Input Validation
tags: validation, html input, js, npm module
---

# 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](https://github.com/HarveyDanger/VasiliskJS)


# 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;
```

3. 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](https://github.com/HarveyDanger/VasiliskJS)

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