js-form-validator

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/