Tutorial PHP - Membuat form input dengan format tertentu / input mask dengan JQuery

Pada artikel tutorial kali ini, saya akan menjelaskan secara singkat bagaimana cara membuat input masking dengan menggunakan plugin JQuery. Ada kalanya saat membuat suatu input pada form, kita membutuhkan masking pada input tersebut agar data yang diproses dapat lebih teratur dan sesuai dengan keinginan kita, misalnya membuat format penulisan tanggal, nomor telepon, dan lain sebagainya.

#INSTALASI

Di sini saya menggunakan plugin JQuery Inputmask yang dapat anda download pada link berikut https://github.com/RobinHerbots/Inputmask. Untuk instalasi seperti biasanya anda dapat mendownload terlebih dahulu source code tersebut atau bisa langsung menggunakan CDN yang disediakan. Dalam tutorial ini saya menggunakan CDN pada link berikut https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js dikarenakan saya tidak menemukan versi bundle saat saya mendownloadnya secara manual pada github tersebut. Dan pada saat saya mencoba melakukan masking tanggal, program akan error saat saya tidak menggunakan js bundle tersebut. Mungkin ada yang terlewat saat saya melakukan percobaan.

#CARA PENGGUNAAN

Pada artikel ini saya akan memberikan 3 contoh penggunaan sederhana dari plugin ini. Walau sebenarnya plugin ini dapat digunakan untuk hal yang jauh lebih detail daripada yang saya contohkan. Hal pertama yang perlu dilakukan adalah melakukan include script jquery dan jquery inputmask seperti kode di bawah ini.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>

Kemudian untuk tampilan atau interfacenya, saya menggunakan 3 buah input type text untuk mencontohkan 3 masking yang berbeda seperti kode berikut ini 

    <input id='input_mask' type="text">

    <br/><br/>

    <input id='input_mask_date_time' type="text">

    <br/><br/>

    <input id='input_mask_currency' type="text">

#MASKING UMUM

Pada contoh pertama ini adalah cara melakukan masking secara general. 

        $('#input_mask').inputmask({

            mask: 'SJ-AAA-****-99999',

            definitions: {

                A: {

                    validator: "[A-Za-z0-9 ]"

                },

            },            

        });

Pada contoh kode di atas, input dengan id input_mask akan menampilkan input dengan format masking SJ-AAA-****-9999. Huruf A secara default akan membatasi input berupa huruf saja, angka 9 secara default membatasi input hanya berupa angka, sedangkan karakter * merupakan gabungan dari huruf dan angka. 

Kode di atas akan membuat masking di mana 2 huruf pertama dari input adalah SJ diikuti dengan separator "-". 3 karakter berikutnya adalah huruf, 4 karakter gabungan huruf dan angka, dan terakhir adalah 5 karakter berupa angka saja. Sesuaikan saja format masking yang anda butuhkan mengikuti panduan penggunaan yang sudah saya jelaskan. 

Perintah definitions digunakan untuk membuat format masking yang baru. misalnya saya memodifikasi format A dari yang sebelumnya hanya bisa menerima huruf saja menjadi bisa menerima huruf, angka. dan juga spasi. 

#MASKING TANGGAL

Berikut ini adalah contoh kode untuk masking tanggal

        $("#input_mask_date_time").inputmask("datetime", {

            mask: "y-1-2 h:s:s",

            placeholder: "yyyy-mm-dd hh:mm:ss",            

            separator: "-",

            hourFormat : 12

        });

Secara default waktu akan menggunakan format 24 jam. Untuk merubahnya menjadi format 12 jam dapat digunakan perintah hourFormat.

#MASKING CURRENCY

Contoh terakhir yang saya berikan adalah masking currency. Berikut ini contoh kode cara penggunaannya 

        $("#input_mask_currency").inputmask({

            prefix : 'Rp ',

            radixPoint: ',',

            groupSeparator: ".",

            alias: "numeric",

            autoGroup: true,

            digits: 0

        });

Perintah prefix untuk menambahkan satuan di depan angka, radixPoint untuk menunjukkan pemisah desimal, autoGroup diisi true untuk mengubah secara otomatis format angka saat mencapai ribuan dan seterusnya.

Berikut ini saya sertakan contoh kode secara lengkap yang mencakup ketiga contoh di atas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Input Masking</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
</head>
<body>
    <input id='input_mask' type="text">
    <br/><br/>
    <input id='input_mask_date_time' type="text">
    <br/><br/>
    <input id='input_mask_currency' type="text">
    <script>
        $('#input_mask').inputmask({
            mask: 'SJ-AAA-****-99999',
            definitions: {
                A: {
                    validator: "[A-Za-z0-9 ]"
                },
            },            
        });

        $("#input_mask_date_time").inputmask("datetime", {
            mask: "y-1-2 h:s:s",
            placeholder: "yyyy-mm-dd hh:mm:ss",
            separator: "-",
            hourFormat : 12
        });

        $("#input_mask_currency").inputmask({
            prefix : 'Rp ',
            radixPoint: ',',
            groupSeparator: ".",
            alias: "numeric",
            autoGroup: true,
            digits: 0
        });
    </script>
</body>
</html>

Demikian artikel Tutorial PHP - Membuat form input dengan format tertentu / input mask dengan JQuery ini. Untuk penggunaan lebih mendetail dapat anda baca pada halaman github plugin yang sudah saya sertakan sebelumnya. Semoga penjelasan pada artikel ini dapat dipahami dan selamat mencoba.