DEV Community

Dendi Handian
Dendi Handian

Posted on

2 1

Adding jQuery Mask to Laravel (The Laravel-Mix Way)

If you developing an app that has currency input, you may think of how to make it 'prettier' with thousand separator. Developing thousand separator by your own may be hard. Or if you found scripts on a site like Stackoverflow, you may be unsure if it works well or buggy. So, the last options is to find a library for it. I found one and it looks promising but I have bad news, it needs jQuery. But the old ways still worth to use these days, as long as you don't use legacy version of it. Anyway, let's implement it in our beloved framework Laravel and its Mix.

Prerequisites to code along

Have your own Laravel app to follow along, you already installed jQuery with Laravel-Mix and make sure the jQuery is working for your web.

Installing jQuery Mask Plugin

The library works as a plugin for jQuery. To install jQuery mask, here is the npm command:

npm install jquery-mask-plugin --save-dev
Enter fullscreen mode Exit fullscreen mode

The Currency Component

The component to use later is simple, we use <input> element with text type (not number type) and has rupiah class in it:

<input class="rupiah" type="text" name="price" id="price">
Enter fullscreen mode Exit fullscreen mode

Applying jQuery Mask

As usual, you may have similar entrypoint javascript like this:

window._ = require('lodash');

try {

    window.$ = window.jQuery = require('jquery');

} catch (error) {
    console.log(error);
}
Enter fullscreen mode Exit fullscreen mode

By the way, I live in Indonesia and the nation's currency is Rupiah (IDR). The example format is Rp15,000,000, it uses comma to separate the thousands. So the masking for this is 0,000,000,000 and we limit it to billion with maximum up to 9,999,999,999. Let's import the jquery mask plugin below the jquery object assignation and the masking to the rupiah class:

window._ = require('lodash');

try {

    window.$ = window.jQuery = require('jquery');

    require('jquery-mask-plugin');
    $('.rupiah').mask('0,000,000,000', {reverse: true});

} catch (error) {
    console.log(error);
}
Enter fullscreen mode Exit fullscreen mode

Build and Test!

Run npm run development for development-mode assets or npm run production for production-ready assets. The masking for the component should be working, let me know if it doesn't 🎃.

Unmasking Upon Form Submit

If the component is used for a form input and you masked it, the submitted value will be the masked value and to store it in the database of course we need the raw value. To handle this, you can bootstrap any form submission and unmasked the value like this:

  $('form').on('submit', function(){
    $('.rupiah').unmask();
  });
Enter fullscreen mode Exit fullscreen mode

version used:

node v14.16.0
npm 6.14.11
laravel-mix 6.0
Enter fullscreen mode Exit fullscreen mode

Billboard image

Synthetic monitoring. Built for developers.

Join Vercel, Render, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay