JQuery Masked Input Does Not Working in Rails 6

Question

I am trying to use the JQuery Masked Input in my form on Rails 6. But it seems to me that the application.js in assets is not working, i am not sure. I installed the plugin through yarn with the command: yarn add jquery-mask-plugin. It was included in package.json as a dependency.

To setup, I went to app/assets/javascripts/application.js. This is the file:

//= require jquery
//= require jquery_ujs
//= require jquery-mask-plugin
//= require_tree .

$.jMaskGlobals.watchDataMask = true;

In app/javascript/packs/application.js I tried to import the JQuery and the plugin ass well:

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
import 'inputmask';

Now in my form, this is how I tried to use the plugin:

<%= form.text_field :cpf, class:'form-control', 'data-mask': '999.999.999-99' %>

As I said before, I am not sure, but I think the problem is the application.js file in assets, cause I wrote a console.log("test") command just to see if it is executing and nothing appeared at the web console when the server was running.

Can someone would help me?

Answer 1

1. in app/javascript/packs/application.js

   $(document).on('turbolinks:load', function () {
     var im = new Inputmask('999.999.999-99');
     var selector = $('#person_document');
     im.mask(selector);
   });
   

2. yarn add inputmask

3. in app/javascript/packs/application.js

   require('inputmask');
   

4. in assets/javascript/application.js

   //= require jquery 
   //= require jquery_ujs 
   //= require jquery-mask-plugin 
   //= require_tree .  
   //= require jquery.inputmask.bundle.min
   $.jMaskGlobals.watchDataMask = true;
   

5. in app/javascript/packs/application.js

   require('inputmask');
   

This solved the problem for me.

Answer 2

1. yarn add "jquery-mask-plugin"
2. in app/javascript/packs/application.js

add require

require("jquery-mask-plugin")

3. in app/javascript/packs/application.js

add line at the buttom

$.jMaskGlobals.watchDataMask = true;

4. in .html.erb

   = d.text_field :phone_number, autocomplete: "phone Number", class: "form-control", placeholder: "03xx-xxxxxxx" , 'data-mask': '0000-0000000'

or in html.erb

<%= d.text_field :phone_number, autocomplete: "phone Number", class: "form-control", placeholder: "03xx-xxxxxxx" , 'data-mask': '0000-0000000' %>