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

@degjs/form-validation-min-max-length

v2.0.0

Published

A minlength/maxlength rule for the DEGJS formValidation module.

Downloads

8

Readme

formValidation-minMaxLength

Build Status

A minlength/maxlength rule module for the DEGJS formValidation module.

Install

formValidation-minMaxLength is an ES6 module. Consequently, you'll need an ES6 transpiler (Babel is a nice one) as part of your Javascript workflow.

If you're already using NPM for your project, you can install formValidation-minMaxLength with the following command:

$ npm install @degjs/form-validation-min-max-length

Usage

After importing, formValidation rule modules can be instantiated by passing an array of names into a formValidation options object:

import formValidation from "@degjs/form-validation";

/* Import the MinMaxLength rule module */
import minMaxLength from "@degjs/form-validation-min-max-length";

let validationOptions = {
    rules: [
        minMaxLength
    ]
};

/* Instantiate the formValidation module on an element */
let formElement = document.querySelector('.form');
let validationInst = formValidation(formElement, validationOptions);

Optionally, default rule settings can be overridden by instantiating the rule as a function and passing options as an object:

let validationOptions = {
    rules: [
        minMaxLength({
            message: 'Please enter between [minToken] and [maxToken] characters.',
            events: [
                'focusout',
                'submit'
            ]
        })
    ]
};

formValidation-minMaxLength builds upon the HTML5 maxlength validation pattern, and also adds a custom data-minlength attribute for extending native functionality. Therefore, after instantiating the rule module, a field in the validation instance will be tested by this rule simply by setting the data-minlength and maxlength of a field's input.

This rule module contains its own default validation message. However, this message can be overridden by adding a data attribute at the field or form level (in that order of importance).

Because we may want to customize the validation message based on messages set on DOM elements, this module also makes use of token values that can be set in the rule's settings, or customized via a callback function.

Sample Markup:

<form class="form" data-validation-minmaxlength-message="This message will override the default rule message, and only use [minToken].">
    <fieldset>
        <div class="js-validation-field" data-validation-minmaxlength-message="This message will override both the default rule message and the form element message, and only use [maxToken].">
            <label for="username">Username</label>
            <input data-minlength="1" maxlength="100" type="text" id="username" name="username">
        </div>
        <button type="submit">Submit</button>
    </fieldset>
</form>

Options

options.message

Type: String
Default: Please enter a value between [minToken] and [maxToken] characters.
The default message displayed when a field fails this rule's validation test.

options.messageAttr

Type: String
Default: data-validation-minmaxlength-message
The data attribute formValidation will check when determining message hierarchy

options.events

Type: Array
Default: ['focusout','submit']
An array of DOM events that will cause the rule to run validation on a field (or the entire form, when using submit). NOTE: focusout should be used in place of blur due to event bubbling limitations.

options.minAttr

Type: String
Default: data-minlength
The data attribute the rule will check when determining minimum length.

options.maxAttr

Type: String
Default: maxlength
The data attribute the rule will check when determining maximum length.

options.minToken

Type: String
Default: [minToken]
The token the rule will replace with the calculated minlength value.

options.maxToken

Type: String
Default: [maxToken]
The token the rule will replace with the calculated maxlength value.

For more detailed usage instructions, see the formValidation Usage documentation.