Simple Input Mask and Validation Plugin | jquery.maskedinput

Masked input is a simple but fully configurable jQuery input mask extension that allows the user to type characters in a fixed position in a specific format. Great for Date / IP Address / Currency input fields.

jquery input mask phone number validation, jquery currency input mask, jquery input mask regex, jquery input mask alphanumeric, jquery input mask number only

More features:

  • Live data validation.
  • Multiple masks are allowed in one field.
  • Fully accessible via ARIA themes.
  • Custom regex style.
  • Plenty of options and API.

How to make use of it:

1. Include the required JavaScript libraries on the web page.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/jquery.maskedinput.umd.min.js"></script>

2. Create a brand new MaskedInput object and set the information format as follows:

var dateMask = new MaskedInput({
    format: 'dd/MM/yyyy hh:mm tt',
    // additional patterns to recognize the format
    patterns: {}

3. Append the date masks to a given input.


4. Set the choices for every area:

  .fieldOption('hours_12', 'required', false)
  .fieldOption('minutes', 'required', false)
  .fieldOption('ampm', 'required', false)

5. API strategies.


// Get an internal field element by index or by name.

// Get/set a field's configuration option
.fieldOption(name, newValue)

// Get/set an internal field's value by index or by name.
.fieldValue(index, newValue)

// Get/set a configuration option
.option(name, newValue)

// Call if something has drastically changed and the control needs to be regenerated. 
// Only applicable when you've manually changed a field's type.

// Update the size of the field's content. 
// This can't be called when the control is not on the DOM yet. If you don't want the field to be dynamically sized, you can skip calling this.

// A synonym for value

// Get/set the full value

6. PartType parameters:

* @typedef {String} MaskedInput~PartType
* @name MaskedInput~PartType
* @enum {String}
var PartType = {
  /** @const */ NUMBER: 'number',
  /** @const */ TEXT: 'text',
  /** @const */ LABEL: 'label'




  • .field(index) – Get an internal field element by index or by name.
  • .fieldOption(name, newValue?) – Get/set a field’s configuration option (See MaskedInput~Part for available options)
  • .fieldValue(index, newValue?) – Get/set an internal field’s value by index or by name.
  • .option(name, newValue?) – Get/set a configuration option
  • .render() – Call if something has drastically changed and the control needs to be regenerated. Only applicable when you’ve manually changed a field’s type.
  • .resize() – Update the size of the field’s content. This can’t be called when the control is not on the DOM yet. If you don’t want the field to be dynamically sized, you can skip calling this.
  • .val(newValue?) – A synonym for value
  • .value(newValue?) – Get/set the full value


  • format: String – The format to use. This is the most important thing here.
  • patterns: Object<String, MaskedInput~Pattern> – Additional patterns to recognize in the format


You can access these value through MaskedInput.PartType.

  • NUMBER = 'number' – A numeric field
  • TEXT = 'text' – A textual field (possibly with pre-defined options)
  • LABEL = 'label' – A label – this is the readonly text that appears between fields


  • type: MaskedInput~PartType – Type of the field
  • name: String – Name for this field
  • ariaLabel: String – An ARIA accessibility label
  • text: String – Text for this field if it’s a LABEL
  • placeholder: String – Placeholder for the field
  • length: Number – The length, in characters, of the field. 0 means “any length”. Applicable for both numeric and textual fields.
  • maxLength: Number – The maximum length, in characters, of the field.
  • numericMin: Number – Minimum numeric value
  • numericMax: Number – Maximum numeric value
  • validator: RegExp|String|function(value:String) – Validator regex or function
  • options: String[] – Array of pre-defined String options for a textual field.
  • postProcess: function(value,type:MaskedInput~Part) – Function for post-processing a value before retrieving by user
  • padding: Number|Boolean – Enable (or specify minimum) padding in value result (default true)
  • required: Boolean – Is the field required (default true)
  • defaultValue: String – Default value, used if the field is not required
  • forcePlaceholderWidth: String – Always consider placeholder’s width (default true)

MaskedInput~Pattern (inherits MaskedInput~Part)

  • pattern: RegExp|String – Specifies the regex pattern to look for in the format

All MaskedInput~Part options (except validator and postProcess) can be specified in the MaskedInput~Pattern as they are, or as a function that returns the value.
If a function is specified, then it receives the regex match in the arguments. i.e. length: 2, vs. length: function (match) { return match.length }.

Simple Input Mask & Validation Plugin, jquery.maskedinput Github, jquery masked input get value without mask, jquery inputmask validator, jquery mask function example

See Demo And Download

Official Website(danielgindi): Click Here

This superior jQuery/javascript plugin is developed by danielgindi. For extra Advanced Usages, please go to the official website.

Related Posts


Generating Beautiful Vector Graphs With jQuery | smartGraph

SmartGraph is a free and easy-to-use JavaScript library to create beautiful vector diagrams with many customizations. This plugin allows developers to create dynamic, responsive, draggable vector graphics…


Image Slider With 20 Cool Transitions Component | vue-flux

Vue flux is an image slider developed with Vuejs 2 that comes with 20+ nice transitions out of the box. Included transitions 2D transitions Fade: Fades from…


Simple background Image Parallax Scroll Plugin In jQuery

Background parallax effect is a simple jQuery background image without any library. Uses jQuery’s scroll() function to track the scroll event and applies the exact parallax scroll…


Modular Color Picker Plugin for Bootstrap | BS Colorpicker

Bootstrap Colorpicker is a standard color picker plugin for Bootstrap 4. Colorpicker Plugin for Bootstrap 5/4/3 frameworks that allow you to add a color picker to an…


GDPR Friendly iFrame Manager In Vanilla JS | iframemanager

IframeMananger is a lightweight JavaScript plug-in that helps you to comply with GDPR by completely removing iframes at first and setting a notice related to that service….


Diagonal Thumbnails Carousel Slider | Anime.js

Diagonal Slider is a cool mini carousel made with Anime.js JavaScript library. It takes a bunch of pictures and turns them into a circular user interface where…