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

js-form-validator

v1.0.2

Published

Js Form Validation - Package for simplify form validation =========================================================

Downloads

7

Readme

Js Form Validation - Package for simplify form validation

What is it ?

Js Form Validation is a simple package to validate your forms. This package works with standard js form API, so you can use any error message customisation library (or write own realization) with it.

Installation

npm

    npm install js-form-validation --save

Including package in your project

There are two ways to include js-form-validator in your project:

  • You can include js-form-validator in your page. After this you get access to "formValidator" variable:
    <script src="node_modules/js-form-validator/dist/form-validator.min.js"></script>
  • You can include js-form-validator like module in your project:
    import formValidator from 'js-form-validator';

or

    var formValidator = require('js-form-validator');

if you use es5 syntax

API

Js Form Validation has 2 methods only:

setFormValidation(formName, rules)

set your validation rules to your form

####Parameters

formName Type: String your html form name.

rules Type: Object An object with validation rules. (See Config Object section)

    formValidator.setFormValidation('userRegistrationForm', registrationFormRules);

addValidator(validatorName, callback)

add custom form validator

####Parameters:

validatorName Type: String name of your validator (example: 'passwordConfirmation').

callback Type: Function your validator function.

Notice:

your validator function should has the following structure:

   function validator(fieldValue, data, firstBindedFoueldValue, secondBoundedFieldValue, ....) {
     // your check. Must return true or false
   }

where:

  • fieldValue - current validated field value
  • data - additional data provided by config object
  • firstBoundedFieldValue, secondBoundedFieldValue - values of bounded field (example: password field in password confirmation check)

if you didn't specify 'data' in config object, you still must provide data parameter in your function!

Example:

our favorite password confirmation validator :)

     formValidator
       .addValidator('confirmPassword', function (passwordConfirmation, data, originalPassword) {
         return passwordConfirmation === originalPassword
       });

Config object

Config object has the following structure:

[{
  name: 'firstFieldName',
    rules: [{
      name: 'ruleName',
      message: 'error message',
      data: 'additional data',
      bindWith: ['secondFieldName']
    }, {
      ...
    }]
}, {
  name: 'secondFieldName',
  rules: [...]
}];

where each field is an object in list. it has 2 properties:

  • name - html field name
  • rules array - rules array is an array of all rules belong to this field.

Each rule in rules array has:

  • name
  • message

Also rule can two additional properties:

  • data - additional data to check rule validity (example min length value to min length check)
  • bindWith - field values that you want to use in Validator function (example password confirmation :))

NOTICE: each field in config object must have named like in your html file

Example:

  // simple registration form rules scheme
  
  var registrationFormScheme = [{
    name: 'userLogin',
    rules: [{
      name: 'required',
      message: 'field is required'
    }, {
      name: 'minLength',
      message: 'login is too short',
      data: 5
    }, {
      name: 'maxLength',
      message: 'login is too long',
      data: 12
    }]
  }, {
    name: 'userPassword',
    rules: [{
      name: 'required',
      message: 'field is required'
    }, {
      name: 'minLength',
      message: 'password is too short',
      data: 5
    }]
  }, {
    name: 'userPasswordConfirmation',
    rules: [{
      name: 'required',
      message: 'field is required'
    }, {
      name: 'confirmPassword',
      bindWith: ['userPassword'],
      message: 'please, repeat your password'
    }]
  }];

this config object represents following web form

  <form name="userRegistrationForm" action="" id="userRegistrationForm" class="col-md-5 offset-md-5">
    <input name="userLogin" id="userLogin" type="text" class="form-control" placeholder="login">
    <input name="userPassword" id="userPassword" type="password" class="form-control" placeholder="password">
    <input name="userPasswordConfirmation" id="userPasswordConfirmation" type="password" class="form-control" placeholder="password confirmation">
    <button class="btn bg-primary submit-btn">Submit</button>
  </form>

Notice: default js form validator has following validators:

  • required - field required check.
  • minLength - field value min length check (has data additional parameter).
  • maxLength - field value max length check (has data additional parameter).
  • min - field value greater than min value check (has data additional parameter). NOTICE: html input type must be number
  • max - field value greater than max value check (has data additional parameter). NOTICE: html input type must be number
  • email - field value on email pattern check.

Example

You can find example of usage js-form-validator in 'example' folder. you must execute the following commands to run example:

  npm install
  npm start

Example will be available on http://localhost:4000/