Permalink
Fetching contributors…
Cannot retrieve contributors at this time
146 lines (92 sloc) 4.25 KB

Masks

How pre-defined masks work

Note : User defined masks work slightly differently than pre-defined masks masks

  1. Each key stroke is evaluated.
  2. If the key stroke is valid, the standard mask will be shown.
  3. If the key stroke is invalid, allowable values will be shown.
  4. For fixed length masks, a green check will appear when the input is both valid and complete.

See masks demo here

Mask key specifications

Help

You can specify one of three positions to show help (and error) messages

Notes:

  1. the default is 'right' (the other options are 'top' and 'bottom')

User defined Masks

Requirements for user defined masks

  1. "Mask" must be an object
    (not a string, as in pre-defined masks)
  2. "Mask" object must contain the 'Whole' key
    which specifies the use defined RegExp
Notes:
  1. You do not get the character by character validation (and therefore, the character specific error messages) with user defined masks.
  2. If you use FixedLen with a user defined masks, it is helpful to make the 'HelpMsg' massage be that exact length. This will make the progress highlighting behave as intended (i.e., showing the user how many valid characters were entered and how many need to be entered to fufill the 'FixedLen' requirement).

Example

Whole (required)

This is the RegExp that matches the input and signifies that the input is completed (the one exception is if the FixedLen is defined - in that case, the input is not complete until the FixedLen character count is reached)

HelpMsg (optional)

When using a User Defined masks, you can specify the Help message text to display while user is inputting data into the input element.

FixedLen (optional)

When using a User Defined masks, you can specify a FixedLen. To pass validation, the input string must be this exact length.

Notes:
  1. when using FixedLen, if the user input passes the Mask test and the FixedLen is reached, the onSubmit event will be triggered with data.type set to 'Completed'. This allows a developer to automatically proceed (e.g., with a database update) once the last valid character has been entered (enter key becomes optional).

Pre-defined masks

YYYYMMDD

"Mask": "YYYYMMDD"
Notes:
  1. date will be saved in the menu_opt_key in javascript ISO format (YYYY-MM-DD).

Mon DD, YYYY

"Mask": "Mon DD, YYYY"
Notes:
  1. date will be saved in the menu_opt_key in javascript ISO format (YYYY-MM-DD).

USphone

Note: the "Phone" mask saves the phone number as numbers (formatting is stripped) in the menu_opt_key

"Mask": "USphone"

HH:MM AM

"Mask": "HH:MM AM"

Money

Note: the "Money" mask saves the amount as a float in the menu_opt_key

"Mask": "Money"

See masks demo