npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

formalise

v2.0.6

Published

Quick and easy form and input validation bolstered by browser APIs

Downloads

5

Readme

formalise

Build Status

Form and input validation built around browser APIs. Zero dependencies, 1.7kb bundle

npm i formalise --save

Usage

If a bundler is being used, formalise can be imported using the ES2015 syntax. There is also a conventional bundle.

// ES2015 module
import formalise from 'formalise';

formalise.addForm({
    form: document.querySelector('[data-formalise-example]'),
});

This will add the form element [data-formalise-example] to use formalise validation.

How it works

formalise itself doesn't do the heavy lifting in terms of form validation, rather hooking into native browser APIs whilst adding a few quality of life features.

Once .addForm is called, the following occurs:

  • novalidate attribute is added to the form
  • The class is-pristine is added to all inputs

Depending one the config, when either the input or form is validated the following occurs:

  • The class is-pristine is replaced with is-dirty if it's the first time checking the status of an input
  • The input is checked to see if it's valid using HTMLInputElement.validity.valid
  • The class is-valid or is-invalid is added to the input depending on it's validity status
  • If inputParentSelector config value is provided, the parent element is found and the class is-valid or is-invalid is added to the element.

The above classes can be hooked into and used to style valid, invalid inputs.

Browser / polyfill support

To help aid in any issues, formalise does come included with a small subset of polyfills that can be used. These are opt-in and will require including seperately over the main bundle.

import 'formalise/dist/polyfill.validityState.js';
import 'formalise/dist/polyfill.objectAssign.js';
import 'formalise/dist/polyfill.arrayFind.js';

polyfill.io can also help with Object.assign, Array.find if required

<script src="//cdn.polyfill.io/v2/polyfill.js?features=Array.prototype.find,Object.assign"></script>

Config

formalise.addForm({
    form: null,
    validateOn: {
        blur: true
    },
    submitFormWhenValid: false,
    onInputBlur: function() {},
    onFormSubmit: function() {},
    inputParentSelector: null,
    focusOnFirstInvalidInput: true
});

form

Type: HTMLFormElement Default: null

The form to hook validation into, this is required.

validateOn

Type: Object

validateOn.blur

Type: Object Default: true

Controls whether a single input should be validated when the input loses focus.

submitFormWhenValid

Type: Boolean Default: false

Sets whether the form should be submitted once valid. The 'onFormSubmit' handler is called before form is submitted.

By default, the form will need to be submitted manually inside the provided 'onFormSubmit'. If no submit handler is provided and the form is valid, by default it will submit the form.

onInputBlur

Type: Function Default: function(inputElement, isInputValid, inputValidityStatus) {}

Handler for when an input loses focus and the 'blur' event is fired. Passed into it is the input element the event was fired on, a boolean for if the input is valid and the complete validity status object of the input.

onFormSubmit

Type: Function Default: function(formIsValid, inputList) {}

Handler for when the form submit event is fired. Passed into it is a boolean for if the form is valid and an array of all inputs in the form.

inputParentSelector

Type: String Default: null Example .input-parent

A selector for a parent of the input can be provided that adds the same validation state classes (such as is-valid, is-invalid) to a parent element of the input. If provided, the DOM will be traversed upwards and stop when it matches an element with the provided selector.

This can help for handling UI around inputs, such as validation states.

focusOnFirstInvalidInput

Type: Boolean Default: true

Whether or not to focus on the first invalid input in the form when the form is invalid.