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:
- 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
- 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.
- Easy to setup settings please refer to the example below
- No dependencies
- Lightweight
- 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)
-
cdinto the directory of your preference e.g.cd ~/Documents/Projects - 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;
- In the
package.jsonfile, 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 startand 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)