criteriaJS

Apply pre-defined rules to your password fields.

Install Using Package Managers

# Bower
bower install --save criteriajs

# NPM
npm install criteriajs

Import Library

import 'criteriajs';

Register Global Rules

Rules are pretty self-explanatory. Length rule has a type of range (min-max) while the rest only checks for single value (min)

const criteria = $('input[data-criteria]').criteria({
  rules: {
    length: [6, 15],
    contains: {
      alphabetical: 1,
      numerical: 1,
      lowercase: 1,
      uppercase: 1,
      special: 1,
    },
  },
  initialize: ($element) => {},
  change: ($element, attributes) => {
    Object.values(attributes.rules).every(rule => rule === true);
  },
  focus: ($element, attributes) => {},
  blur: ($element) => {},
});

Using Data Attribute

If you wish to register criteria per element instead of globally, just omit the rules object, add data-criteria attribute to your inputs and seperate each rule with a pipe (|).

Example:

<input type="password" data-criteria="length:6-15|alphabetical:1|numerical:1|uppercase:2|lowercase:3">
<input type="password" data-criteria="length:4-20|numerical:3|uppercase:1|special:3">

const criteria = $('input[data-criteria]').criteria({
  initialize: ($element) => {},
  change: ($element, attributes) => {
    // console.log($element, attributes);
  },
  focus: ($element, attributes) => {},
  blur: ($element) => {},
});

When to Enable / Disable Form Submit

You should disable the form from being submitted by adding disabled attribute to the button beforehand, and remove the attribute when all criteria are matched. A simple check can be used to determine whether all of the rules you wish to validate are satisfied or not.

Object.values(attributes.rules).every(rule => rule === true);

Setting up development environment

You can go ahead and play around with src/example/index.html after running the commands below.

# 1. fetch project
git clone [email protected]:cfkarakulak/CriteriaJS.git

# 2. change directory to criteriajs and install dependencies
npm install

# 3. compile and listen for changes
npm run watch

Settings

Rule | Type | Default | Description ------ | ---- | ------- | ----------- length | array | [6, null] | Checks whether the value of the target element has a length between min and max. Use [6, null] if you wish to disable maximum check. alphabetical | integer | null | Checks whether the value has at least n number of alphabetical characters. Latin Alphabet numerical | integer | null | Checks whether the value has at least n number of numerical characters. [0-9] lowercase | integer | null | Checks whether the value has at least n number of lowercase characters. [a-z] uppercase | integer | null | Checks whether the value has at least n number of uppercase characters. [A-Z] special | integer | null | Checks whether the value has at least n number of special characters. [!,@,#,%,$,%]