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

instant-validation

v1.0.4

Published

Quick setup. No Dependencies. Framework agnostic validation tool

Downloads

196

Readme

instant-validation

Generic badge

  • quick setup
  • framework agnostic
  • zero dependencies
  • tiny bundle size

Size: ~4k, ~1.5k gzip’d

Why to use:

  1. All the validation state management of your form is under the hood.
  2. Incapsulation of all logic related to validation, you should only call needed method and library will care about details
  3. Easy integration
$ npm i instant-validation

A simple validator creation example

import Validator from 'instant-validation';

const validator = new Validator({
  name: [
    {
      rule: value => !!value,
      message: 'Please enter your name'
    }
  ]
});

Rules

Each rule is a function and it should return true for a valid case and false for invalid. Each field should contain an array with minimum 1 rule

You can import ready to use rules

import { requiredRule, lengthRule } from 'instant-validation/rules';

Right now there are only two rules - requiredRule and lengthRule but we are going to add some other useful rules in future releases.

React Form example

Here is the example of a simple React form for creating an account

import * as React from 'react';
import Validator from 'instant-validation';
import { requiredRule, lengthRule } from 'instant-validation/rules';
import { emailRule } from './myCustomRules';

const validator = new Validator({
  name: [
    {
      rule: requiredRule,
      message: 'Please enter your name'
    },
    {
      rule: lengthRule(2),
      message: 'Your name should be at least 2 characters'
    }
  ],
  email: [
    {
      rule: requiredRule,
      message: 'Please enter an email'
    },
    {
      rule: emailRule,
      message: 'Please enter a valid email'
    }
  ],
  password: [
    {
      rule: requiredRule,
      message: 'Please enter password'
    }
  ],
  repeatPassword: [
    {
      rule: requiredRule,
      message: 'Please repeat password'
    },
    {
      // passwrodOriginal will appear here trough the insertArgs method
      rule: (value, passwrodOriginal) => value === passwrodOriginal,
      message: 'Passwords are not equal',
      ruleId: 'passwordEqual'
    }
  ]
});

class RegistrationForm extends React.Component {
  constructor() {
    super();
    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
    this.state = {
      name: '',
      email: '',
      password: '',
      passwordRepeat: ''
    };
  }

  onChange(e) {
    this.setState({ [name]: e.target.value });
  }

  render() {
    const { email, password, passwordRepeat } = this.state;
    const { errors } = validator
      // if you have some rules with many arguments, you can pass those arguments like this
      .insertArgs({
        passwordEqual: [password]
      })
      .validate(this.state);
    return (
      <form>
        <input name="name" value={name} onChange={this.onChange} />
        <div className="error">{errors.name}</div>

        <input name="email" value={email} onChange={this.onChange} />
        <div className="error">{errors.email}</div>

        <input name="password" value={password} onChange={this.onChange} />
        <div className="error">{errors.password}</div>

        <input
          name="passwordRepeat"
          value={passwordRepeat}
          onChange={this.onChange}
        />
        <div className="error">{errors.passwordRepeat}</div>

        <button
          onClick={this.onSubmit}
          type="submit"
          disabled={!validator.isFormValid()}
        >
          Enter
        </button>
      </form>
    );
  }
}

export default RegistrationForm;

Api

validate({ fieldsState })

Get errors object with errormessages using validate method. You should call this method each time, when you have updates in your field values. Validator will apply and recalculate rules only for fields, that were changed.

const { errors } = validator.validate(fieldsState);

If you need a detailed information for each field, you can get fields object

const { errors, fields } = validator.validate(fieldsState);

Each field contains information

  • showError: boolean (should it show the error message)
  • statuses: boolean[] (array of booleans with the validation result for each rule)
  • touched: boolean (if this field has changed a value ever)
  • valid: boolean (if this field is valid)
  • value: any (original value of the field)

isFormValid()

Just returns a boolean status of the whole form.

showAllErrors(show = true)

You can use this method, if you want to show all the untouched field errors. (For exmaple, if your submit-button is always enabled.) To reset error higlighting to initial state (all error messages are hidden by default), you can invoke showAllErrors(false). Please, don't forget to manually re-render your form, after calling this method. Here an example for React.js

// submit button callback
onFormSend() {
  validator.showAllErrors();
  this.setState({ submitPressed: true }); // update component state, to invoke re-render
  if (!validator.isFormValid()) {
    return; // do no send invalid form
  }
  this.props.send(this.state.field);
};

insertArgs({ [ruleId]: [...additionalArguments] })

Some of the rules can be related to other fields. This means that you should have more than 1 argument in the rule. You can provide additional argument to such rules using this method. Don't forget to name the rule with ruleId for that

  {
    rule: (value, otherFieldValue) => value > otherFieldValue,
    message: 'Field should be greater than another',
    ruleId: 'greaterRule'
  }
const { errors } = validator
  .insertArgs({
    greaterRule: [otherField]
  })
  .validate(this.state);

Recipes

integration recipes