Rule-Based HTML Form Validation with Formation

Derek Rosenzweig — Tue, 24 Jul 2018 01:17:23 +0000

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/

Poll: Helpful or Annoying - Fixed Position Video Players on Page Scroll

Derek Rosenzweig — Fri, 17 Nov 2017 21:18:50 +0000

This is less of a post for developers, more of a question for consumers - ie individuals visiting websites for content articles, which happen to show videos.

We've all been there. You see a link to an article you want to read so you click it, and the page loads. You start scrolling to get past the enormous header ads and read the content, and a video starts playing. It then re-positions itself (ie its CSS changes to position:fixed) and resizes to be always visible in a rail, and stays there while you scroll the article. The question is:

Derek Rosenzweig

@ozzyogkush

Question for my fellow interneters - does anyone actually *like* it when you're visiting a web page (news or blog a… twitter.com/i/web/status/9…

16:27 PM - 17 Nov 2017

00

Do you generally like this behavior? What does your own site's user actions/experience tell us? Is it a trend that should continue, or that should go away? Take the poll above, leave your responses below!

DEV Community: Derek Rosenzweig

Rule-Based HTML Form Validation with Formation

Poll: Helpful or Annoying - Fixed Position Video Players on Page Scroll