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-pattern

v2.0.0

Published

A pattern rule for the DEGJS formValidation module.

Downloads

2

Readme

formValidation-pattern

Build Status

A pattern rule module for the DEGJS formValidation module.

Install

formValidation-pattern 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-pattern with the following command:

$ npm install @degjs/form-validation-pattern

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 Pattern rule module */
import pattern from "@degjs/form-validation-pattern";

let validationOptions = {
    rules: [
        pattern
    ]
};

/* 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: [
        pattern({
        	message: 'This message will override the default rule message.',
            events: [
                'focusout',
                'submit'
            ]
        })
    ]
};

formValidation-pattern builds upon the HTML5 pattern validation pattern. Therefore, after instantiating the rule module, a field in the validation instance will be tested by this rule simply by adding a pattern attribute to the field 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).

Sample Markup:

<form class="form" data-validation-pattern-message="This message will override the default rule message.">
    <fieldset>
        <div class="js-validation-field" data-validation-pattern-message="This message will override both the default rule message and the form element message.">
            <label for="country">Three-letter Country Code</label>
            <input type="text" pattern="[A-Za-z]{3}" id="country" name="country">
        </div>
        <button type="submit">Submit</button>
    </fieldset>
</form>

Options

options.message

Type: String
Default: Please match the field format.
The default message displayed when a field fails this rule's validation test.

options.messageAttr

Type: String
Default: data-validation-pattern-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.

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