thisisjustatest v1.1.3

Table of Contents

• Installing
• Template system
  • Templating characters
  • Separators
  • Some Examples
• Usage
  • First step: import the Module
  • Second step: Initialize MdG
  • Third step: Choose your Parade
• What about validation
• License

Installing

npm install mardigras

Template system

Before to show how to use MdG, it is important to show how its template system works. During the creation of a pattern for a single or multiple mask, you need to create a sequence of templating characters that represents each mask´s character type.

Templating characters

Separators

Separators are literal characters that separates each templating character to shape the mask. The allowed separators are:

• Backslash \
• Brackets [ ]
• Colon :
• Coma ,
• Curly braces { }
• Dot .
• Hyphen -
• Parenthesis ( )
• Slash /
• Vertical Bar |
• Other _ * ^ ; — ¯

Some Examples

Here are some examples of masks, using the template system;

• Brazilian Zip Code (CEP) - #####-###
• Canadian Zip Code - &#&#&#
• French Car Plate - &&-###-&&
• Spanish Car Plate - ####-&&&
• ISBN Code - ###-##-#####-##-#
• Phone Number - (##)#####-####
• Serial Number - ####@@@@@####
• Californian Driver License - @########

Usage

First step: import the Module

First, what you need to do is import MdG.

import mdg from 'mardigras';

Second step: Initialize MdG

Every mask in Mdg needs an initialization.

const someMask = mdg(options);

Options

The Mdg initial options is a Javascript Object with the following values:

* If validation is set, will be called only when the mask is INVALID. ** If validation is set, will be called only when the mask is VALID.

Example - Phone mask

In the following example, we are going to create a multi mask for a phone number. The sequence accepts 10 or 11 digits.

const error = () => {
  console.log('Almost There.');
}
const success = () => {
  console.log('Yayyy! The mask is completed.')
}
const phoneMask = mdg({
  pattern: [
  '(##)####-####', // 10 digits
  '(##)#####-####' // 11 digits
  ],
  onError: error,
  onSuccess: success
});

Third step: Choose your Parade

Still following the example above, in MdG, when it is intialized, you can choose the best way to use it.

Option 1 - HTML Input Field (checkField method)

The checkField method inserts the result of a mask directly on a HTML input field during its manipulation.

someMask.checkfield(inputField, eventType)

* Default: input ...continuing the example:

/*
  HTML file ->
  <input type="text" class="js-mdg" value=""/>
*/
const inputField = document.querySelector('.js-mdg');
phoneMask.checkField(inputField);

Option 2 - Internally (checkValue method)

With checkValue method you can get the mask output internally and expose it the way you want. Best choice for Front-end Frameworks and another tools.

someMask.checkValue(inputValue)

When the method checkValue is called, it expose a Javascript Object with the following values:

* Null if validation is not defined. ...continuing the example:

phoneMask.checkValue('12345'); // 5 digits long
/*
{input: "12345", output: "(12)345", completed: false, isValid: null}
*/
phoneMask.checkValue('1234512345'); // 10 digits long
/*
{input: "1234512345", output: "(12)3451-2345", completed: true, isValid: null}
*/
phoneMask.checkValue('12-34576-1234576') // 14 digits long
/*
{input: "12-34576-1234576", output: "(12)34576-1234", completed: true, isValid: null}
*/

What about validation

If the mask needs to pass through validation, the validation value must be set during the MdG initialization. It´s a function that MUST receive a single String and return a Boolean value. Taking the example above, let´s assume that the two first digits represent the country calling code and the only acceptable codes are from Argentina(54), Chile (56) and Colombia (57).

const countryValidation = ( output ) =>{
  const rule = /\(5[4|6|7]/;
  return rule.test(output)
}

License

This project is licensed under the MIT License - see the LICENSE.md file for details. Enjoy. Have yourself a lot of beads.