Rule-Based HTML Form Validation with Formation

#javascript #forms #opensource #webdev

Even for relatively simple projects, consistent client-side form validation can get tedious. To that end a while ago I wrote a library called Formation (available on NPM at https://www.npmjs.com/package/js-formation).

I was inspired by Bootstrap and how you can simply add data- attributes to your DOM nodes, add the <script> tag, and let the library see and react. This lets the developer use the code without having to know JavaScript, while providing a simple API for hooking into registered changes. Formation allows developers to validate forms based on text inputs, checkboxes/groups, radio button groups, and select boxes. Developers can add handlers to listen to field and/or form validation state changes, and add custom rules and apply them to many fields. See a live example for text-based input.

Currently it enforces a submit button, but that's a choice based on an early opinionated viewpoint that I will likely modify.

This was originally designed with jQuery and raw DOM manipulation in mind, and I have since removed jQuery from the equation as ultimately it was unnecessary. Nowadays, stateful view libraries like React and Vue are the norm, and manual DOM manipulation is less of a thing. So, in the near future I'll be working to extract out the validation and rules engines from the DOM traversal/manipulation side, so that this can be extended easily to 3rd party libraries like React and Vue. It also makes it possible to re-use the rules/validators engines server-side form submission handling (in projects running a Node backend of course).

For basic web projects that don't require the overhead of something like React, but need to let users input and submit data, this can save a lot of time and energy. More often than not, when building some piece of code, a well-maintained module/package/library exists which can and should be re-used. I'd like to think Formation would get to the level where it's in common use. Only time will tell!

This is an open source project and I would welcome contributors! Check it out on github: https://github.com/ozzyogkush/formation/