How to use the "Masked Input" module in Drupal 7

4.8k Views Asked by At

I am trying to build a form in Drupal 7, one of the fields needs to have an input mask. I found the plugin masked input it seems like what I am searching for . Only there is no documentation on how to implement it (I read about currency and this plugin, yet here it is only about getting it to work).

I am new to Drupal, but searching on forums I came up with the following code:

function report_expenses_form($form, &$form_submit) {
  libraries_get_path('maskedinput') . '/misc/ui/jquery.maskedinput-1.3.js';
...
     $form['cash_advance']['amount'] = array(
        '#title' => t('Cash Advance : '),
        '#type' => 'textfield',
        '#default_value' => t('$ 00,00'),
        '#required' => TRUE,
        '#mask' => '$?999.999.999,99',
      );
....

I installed the "Libraries" and "Masked Input" plugins in Drupal and flushed my caches.

I downloaded the jquery.maskedinput-1.3.js and put it in my {DRUPAL_HOME}/misc/ui/

any Ideas?

thank you in advance

4

There are 4 best solutions below

2
On

I downloaded the jquery.maskedinput-1.3.js and put it in my {DRUPAL_HOME}/misc/ui/

This is system Drupal path and you have no need to change it's contents.
In Drupal Libraries are external scripts that are stored in special Libraries folder. In your case in sites/all/libraries.
So file jquery.maskedinput-1.3.js should be in sites/all/libraries/maskedinput folder.

0
On

The problem with the above code is the field type. It should be:

'#type' => 'masked_input', instead of '#type' => 'textfield',

The module documentation shows this, but I didn't notice it for two days.

0
On

The Sean's method only worked for me with old version 1.3.1 of masked input, after 2 weeks and almost giving up:

https://github.com/digitalBush/jquery.maskedinput/releases

Download the package, extract it and then:

cp jquery.maskedinput-1.3.1/dist/jquery.maskedinput.js {DRUPAL HOME}/sites/all/libraries/masked_input/jquery.maskedinput.1-3.js
cp jquery.maskedinput-1.3.1/dist/jquery.maskedinput.min.js {DRUPAL HOME}/sites/all/libraries/masked_input/jquery.maskedinput.1-3.min.js

Make another copy, as maskedinput:

cd {DRUPAL HOME}/sites/all/libraries/
cp -a masked_input maskedinput

Install libraries module, install masked_input and that's. Now you can use it. Maybe masked_input needs some update for jquery library 1.4 compatibility, I'm not Jquery expert just a thought.

1
On

This gets a little confusing. Here is what you need to do:

  1. Download the file from here
  2. In your sites/all/libraries folder, create a folder called "masked_input"
  3. Upload the file to your sites/all/libraries/masked_input folder
  4. Rename the file to jquery.maskedinput-1.3.js or jquery.maskedinput-1.3.min.js so that your final path to the file is either {DRUPAL HOME}/sites/all/libraries/masked_input/jquery.maskedinput-1.3.js or {DRUPAL HOME}/sites/all/libraries/masked_input/jquery.maskedinput-1.3.min.js
  5. Now you can enable the module.
  6. Profit!

Note: This is a temporary workaround that does not require you to patch the module or change any code. The module needs to be fixed to address these issues as documented here

Note 2: After install, you might need to rename {DRUPAL HOME}/sites/all/libraries/masked_input to {DRUPAL HOME}/sites/all/libraries/maskedinput in order to get it load and work.