Masking format input

Masking format input

2908
9
SHARE

Dalam membuat form tentu kita pernah menghadapi kondisi dimana input harus menggunakan format tertentu misalnya untuk tanggal harus dengan format dd/mm/yyyy atau NPWP 15 digit dengan format xx-xxx-xxx-x-xxx-xxx. Hmmm..tentu merepotkan jika kita tidak menggunakan masking input. Pengguna bisa saja memasukkan dengan format yang berbeda.

Masking input format

Untuk menjaga agar user tetap menginput sesuai format kita bisa menggunakan jQuery Library dari http://digitalbush.com/projects/masked-input-plugin/.

Berikut ini adalah contoh penggunaannya :

Step 1 : Anda perlu mendownload maskedinput.js dan download jquery (anda bisa mendowloadnya di akhir artikel)

Step 2 : Buatlah file php dengan nama index.php dengan kode sbb :

ย Step 3 : Jalankan melalui browser dan lihatlah hasilnya.

DEMO | DOWNLOAD

Penjelasan :

Pada contoh di atas saya membuat 2 input yaitu tanggal dan NPWP. Masing-masing saya berikan id yaitu tgl dan npwp. Id tersebut yang kita pakai untuk fungsi mask di bawahnya.

Perlu menjadi perhatian bahwa untuk masking format tanggal, cara di atas tidak dapat mencegah pengguna menginput tanggal yang tidak valid, misalnya 99-99-9999. Untuk itu anda harus tetap melakukan validasi input tanggal sebagaimana mestinya bisa dengan menggunakan PHP ataupun javascript.

Untuk masking berikut ini adalah format yang dapat digunakan :

a – untuk mewakili huruf (A-Z,a-z)

9 – untuk mewakili angka (0-9)

* – untuk mewakili huruf atau angka (A-Z,a-z,0-9)

Misalkan kita memiliki format input MA-2323, kita bisa menggunakan :

Demikianlah cara masking format input, semoga bermanfaat. Terima kasih telah berkunjung ke harviacode.com.

Bagikan artikel ini ya.. terima kasih

9 COMMENTS

  1. I blog often and I genuinely appreciate your information. Your article has really peaked my interest.
    I will bookmark your blog and keep checking for new details
    about once per week. I subscribed to your Feed too.

LEAVE A REPLY