Leopard Chat Client
  • Quick Start
  • Screenshots
  • Setup
    • Extension Helper
    • Context Variables
      • Greeting Message
      • Channel
      • User's Time Zone
      • Location Context Parameters
    • Build Variables
  • Content Styling
    • CSS Styles
    • Icons
    • Markdown & HTML
  • Components Simple Syntax
  • Components
    • Answer Borders
    • Audio Player
    • Auto Open Leopard with Link
    • Alerts
    • Buttons and Lists
    • Card
    • Response Icons
    • Date & Time Pickers
    • Emergency Button
    • Expensive Operations
    • Field Masks
    • Chat Field Types (Email, Password, Location, Upload)
    • Forms
      • Feedback Form
      • Custom Forms
        • Example Config
        • Postback Object
        • Button Object
        • Field Types
        • Style Object
        • Icons Object
        • Masks
        • Validation
    • Google Map
    • Help Text
    • HTML Modal
    • Hyperlinks
    • Images
      • Image
      • Image Carousel
    • Tables
      • Tables - Simple
      • Tables - Advanced
    • Theme Change
    • Toasts
    • Language Auto Switch
    • Minimize Chat after Delay
    • Multiple Components - Same Response
    • Modal Size & Positioning
    • Open Long Response in Modal
    • Print Icon
    • Prompt Trigger Polling
    • Splitting Answers - Chunks
    • Video Player
  • Administration Area
    • Solution Configuration
    • Demo Mode - iFrames & URLs
    • ASR and TTS
  • Integrations
    • Logging / Reporting
    • Social Authentication
    • Live Chat
  • Embedding / Production
Powered by GitBook
On this page
  • Tokens
  • Examples
  1. Components
  2. Forms
  3. Custom Forms

Masks

Applying a mask to a field, forces the user to enter in their input in a specific way. This could be forcing a format for a postcode, zip, phone number, credit card, tracking number etc.

PreviousIcons ObjectNextValidation

Last updated 5 years ago

More information on the acceptable mask formatting can be found here:

Tokens

'#': {pattern: /\d/},
'X': {pattern: /[0-9a-zA-Z]/},
'S': {pattern: /[a-zA-Z]/},
'A': {pattern: /[a-zA-Z]/, transform: v => v.toLocaleUpperCase()},
'a': {pattern: /[a-zA-Z]/, transform: v => v.toLocaleLowerCase()},
'!': {escape: true}

Examples

##/##/####  < Date dd/mm/yyyy
##:##:##    < Time hh:mm:ss
##/##/#### ##:##:##    < Date Time dd/mm/yyyy hh:mm:ss
AA## #### #### #### #### #### ###    < IBAN Number
#####    < US ZIP such as 98075
+1 (###) ###-####    < US Phone Number
#### #### #### ####    < Credit Card Number
The Mask for Vue.js