Javascript Format Input NPWP

NPWP memiliki format angka tersendiri, terkadang jika menampilkan tanpa format membuat user sedikit bingung saat memasukkkan nomor NPWP ke dalam form yang disediakan. Ada baiknya untuk frontend menampilkan NPWP sesuai formatnya agar memudahkan user saat menginput data. Untuk membuat form yang interaktif saat user menginput NPWP bisa membuatnya dengan menggunakan Javascript.

Ada beberapa event di javascript yang bisa dilakukan salah satunya dengan menggunakan event oninput. Jadi setiap 1 nomor inputan user, akan dilakukan pengecekan terlebih dahulu digit berapa kah yang diinput user dan setelah itu kita bisa memberi titik atau strip agar sesuai dengan format NPWP.

Daftar Isi

Membuat Function
Penjelasan Code
Call Function
Validasi Form
Demo

Membuat Function

Mari kita mulai! Pertama buat function untuk pengecekan format NPWP terlebih dahulu, disini saya akan memberi nama function autoFormatNPWP, seperti code di bawah ini:

function autoFormatNPWP(NPWPString) {
    try {
        var cleaned = ("" + NPWPString).replace(/\D/g, "");
        var match = cleaned.match(/(\d{0,2})?(\d{0,3})?(\d{0,3})?(\d{0,1})?(\d{0,3})?(\d{0,3})$/);
        return [      
                match[1], 
                match[2] ? ".": "",
                match[2], 
                match[3] ? ".": "",
                match[3],
                match[4] ? ".": "",
                match[4],
                match[5] ? "-": "",
                match[5],
                match[6] ? ".": "",
                match[6]].join("")
        
    } catch(err) {
        return "";
    }
}

Penjelasan Code

var cleaned = ("" + NPWPString).replace(/\D/g, "");

Pada baris ketiga, saya membersihkan string NPWP terlebih dahulu dari karakter non-digit menggunakan regular expression /\D/g. Hasil pembersihan disimpan dalam variabel cleaned.

var match = cleaned.match(/(\d{0,2})?(\d{0,3})?(\d{0,3})?(\d{0,1})?(\d{0,3})?(\d{0,3})$/);

Di baris keempat, string yang telah dibersihkan kemudian dicocokkan dengan pola yang telah ditentukan menggunakan metode match. Pola yang digunakan adalah untuk membagi string menjadi bagian-bagian yang sesuai dengan format NPWP yang benar. Pola ini memperhitungkan digit-digit yang akan diatur ke dalam kelompok-kelompok tertentu sesuai dengan format NPWP yang benar.

return [      
                match[1], 
                match[2] ? ".": "",
                match[2], 
                match[3] ? ".": "",
                match[3],
                match[4] ? ".": "",
                match[4],
                match[5] ? "-": "",
                match[5],
                match[6] ? ".": "",
                match[6]].join("")

Setelah string NPWP dibagi menjadi bagian-bagian yang sesuai, jika kamu ingin melihat bagian-bagian tersebut kamu bisa melakukan console.log pada variable match, langkah selanjutnya adalah mengatur ulang bagian-bagian tersebut sesuai dengan format NPWP yang benar. Setiap bagian akan diperiksa keberadaannya, dan titik (.) atau tanda hubung (-) akan ditambahkan secara sesuai di antara bagian-bagian tersebut. Pengecekan ini dilakukan untuk memastikan bahwa format NPWP yang dihasilkan sesuai dengan standar yang berlaku.

Bagian-bagian yang telah diatur ulang kemudian digabungkan kembali menjadi satu string menggunakan metode join. String NPWP yang telah diformat dengan benar kemudian dikembalikan sebagai output dari function autoFormatNPWP.

Call Function

Sebelum memanggil function autoFormatNPWP buat form input terlebih dahulu seperti di bawah ini:

<input type="text" id="npwp" maxlength="20">

Jangan lupa tambahkan maxlength=”20″ agar user tidak bisa menginput data jika sudah mengisi full digit NPWPnya. Kenapa maxlengthnya 20? Padahal digit angka NPWP hanya 15. Karena ada 5 string tambahan setelah di auto format yaitu 4 titik (.) dan 1 strip (-). Lanjut lagi setelah itu kita tinggal tambahkan event oninput agar setiap inputan user bisa langung di ubah menjadi format yang kita inginkan. Disini saya tidak menambahkan oninput langsung di dalam HTMLnya tetapi dengan cara memanggil id pada element tersebut di dalam javascript.

const NPWP = document.getElementById("npwp")
NPWP.oninput = (e) => {
    e.target.value = autoFormatNPWP(e.target.value);
}

Langkah selanjutnya kamu tinggal menambahkan event oninput pada id element yang telah dibuat dalam const NPWP dan kamu tinggal memanggil function yang telah kita buat sebelumnya.

Dan berikut fullcode membuat form input untuk menampilkan format NPWP menggunakan javascript dan html seperti di bawah ini

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="npwp" maxlength="20">
    <script>
        const NPWP = document.getElementById("npwp")
        NPWP.oninput = (e) => {
            e.target.value = autoFormatNPWP(e.target.value);
        }
        function autoFormatNPWP(NPWPString) {
            try {
                var cleaned = ("" + NPWPString).replace(/\D/g, "");
                var match = cleaned.match(/(\d{0,2})?(\d{0,3})?(\d{0,3})?(\d{0,1})?(\d{0,3})?(\d{0,3})$/);
                return [      
                        match[1], 
                        match[2] ? ".": "",
                        match[2], 
                        match[3] ? ".": "",
                        match[3],
                        match[4] ? ".": "",
                        match[4],
                        match[5] ? "-": "",
                        match[5],
                        match[6] ? ".": "",
                        match[6]].join("")
                
            } catch(err) {
                return "";
            }
        }
    </script>
</body>
</html>

Validasi Form

Untuk melakukan validasi pada form bisa dilakukan dengan banyak cara. Karena kita sudah menambahkan maxlength pada form input agar user tidak bisa menginput lagi setelah mencapai 15 digit NPWP, Jadi kita hanya perlu fokus validasi minimal digit yang dimasukkan user agar bisa di submit. Seperti NPWP tidak boleh kosong atau inputan tidak boleh dibawah 15 digit.

Agar lebih mudah untuk membuat validasinya, kita cukup menggunakan validation form bawaan dari HTML saja, jadi kita cukup memodifikasi bagian form input dengan menambahkan attribute pattern=”.{20}” dan required seperti code di bawah ini:

<input type="text" name="npwp" id="npwp" pattern=".{20}" maxLength="20" required>

Untuk mengetesnya apakah validasi tersebut sudah berfungsi atau tidak, bungkus inputan tersebut dalam form dan tambahkan button submit agar alert validasi tersebut bisa muncul.

  <form >
      <input type="text" name="npwp" id="npwp" pattern=".{20}" maxLength="20" required>
      <button type="submit">Submit</button>
  </form>

Mungkin kamu tidak terlalu suka dengan tampilan alert validasi bawaan HTML, kamu juga bisa membuat validasi manual dengan tampilan alert sesuka kamu ataupun jika kamu mau yang praktis, kamu bisa menggunakan plugin-plugin validasi yang sudah tersedia. Salah satunya jquery validate yang biasa saya pakai.

Selain praktis kamu juga bisa mengcustom tampilan alert sesuai keinginan kamu. Untuk lebih detailnya kamu bisa baca dokumentasinya di sini.

Demo

Jika kamu ingin melihat tampilan yang sudah saya buat di atas, kamu bisa lihat demonya disini

Selamat mencoba, Semoga bermanfaat guys!