Vasilisk demo

--- 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 ``` Vasilisk demo ``` - 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.

npmmodule

Vasilisk.js - Powerful HTML input validation tool

Join Our Newsletter. No Spam, Only the good stuff.