Simple-Form-Validator

A simple form validator is easy, flexible to use

Installation

npm install --save simple-form-validator

This assumes that you’re using npm package manager with a module bundler like Webpack or Browserify to consume CommonJS modules.

Documentation

• [ createValidators] initialize validators with validator settings

  1. [validator setting can be an object describing validators for form field] each validator object must have two keys, one of which should be msg , the other of which could be required, length, sameas, options, pattern, match and is case-sensitive, moreover, value for these keys could be a function

  var validatorsConfig = {
      name: [{
          required: true,
          msg: 'name cannot be empty'
        }, {
          pattern: 'string',
          msg: 'name should be string'
        }],
      age: [
        {
          required: true,
          msg: 'age should be provided'
        }, {
          pattern: 'digits',
          msg: 'age should be digits'
        }
      ]
    }
  validators = createValidators(validatorsConfig);
  

  2. [validator setting can also be collections of either built-in validators or customized validators for each form field]

  validators = createValidators({
  income: [
      builtinValidators.isRequired('income should be given'), 
      createValidator({
        msg: 'amount is invalid',
        validate: (val, contextFields) => /^\d+[,.]?\d*$/.test(String(val))
      }), 
      builtinValidators.range('income should be between 0 and 100000000', 0, 100000000)
    ],
  address:[
    builtinValidators.isString('valid address should be string'), 
    builtinValidators.length(5, 'valid address should be at least 5 letters')
    ]
  })
  validators = createValidators(validatorsConfig);

• [addValidator] After a form validators is initialized, it is able to dynamically add validators to an existing form field or a brand new field, i.e. (see more example in validate.test.js)

  validators.addValidator('employer', builtinValidators.isRequired('employer should be provided', function() {
  if (emp === 'student') return false;
  else if (emp === 'developer') return true;
    }))

• [validateField] When a form field has changed its contents or lost focus, validateField can be called to validate it. If its value doesn't satisfy all rules of its validators, the corresponding validating error message will be returned. To return undefined means there is no validating errors. It can be called with an optional options that could contain contextFields, implicityRequired and "stopOnErr"

  /* validate a form field with the current value
  @param contextFields        a collection of form feilds and their corresponding values in the concerned form where this field resides 
  @param stopOnErr            flag designating if the validating process should stop when the first validating error appears, default value is TRUE
  @param implicityRequired    flag designating if a field is mandatory if a validator is provicded, default value is TRUE
  */
  validateField: function(field, value, { contextFields={}, stopOnErr=false, implicitRequired=true }={})
  {
  
  }

• [validateForm] validateForm can be called to validate an entire form or just a part of it. Imagine that you have a Accordion showing a complex form and navigate from part 1 to part 2, and part 1 should validated before part 2 is to be shown. Return value of undefined for this method means there is no validating errors. It can be called with an optional options that could contain implicityRequired and "stopOnErr"

  /* validate a form or a part of it
  @param formData             a collection of entire or a part of form feilds that should be validated
  @param stopOnErr            flag designating if the validating process should stop when the first validating error appears, default value is TRUE
  @param implicityRequired    flag designating if a field is mandatory if a validator is provicded, default value is TRUE
  */
  validateField: function(formData, { stopOnErr=false, implicitRequired=true }={})
  {
  
  }

• [built-in validators] for the time being, there are nine built-in validators, isRequired, isNumber, isSame, isString, isEmail, range, length, options, match. The last one is provided for your customized need because you can send your own javascript RegExp

• [customized validators] Besides the above mentioned built-in validators, it is possible to create your own customized validators by calling createValidator, which takes in a js object as param, consisting of msg as validating error msg, validate function, called with (val, contextFields), for instance

  formvalidators = createValidators({
      amount: [
          builtinValidators.isRequired('income should be given'), 
          createValidator({
            msg: 'amount is invalid',
            validate: (val, contextFields) => /^\d+[,.]?\d*$/.test(String(val))
          })
        ]
      })

The customized validators can be used in the same way as built-in validators

Other Usage

In additon to its usage mentioned above, simple-form-validator is originally designed for being used together with react-form-ex, which is a ReactForm provider, faciliating form validation with React components

Open Source Code

Source code for this npm package is available idavollen@github

Enjoy!

License

MIT