Masking format input

Masking format input

3531
11
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.

11 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.

    • kalo itu pakai fungsi php aja mas. misalnya untuk nomor kita bisa menggunakan numberformat php. atau kita buat fungsi sendiri sesuai keperluan kita mas.

LEAVE A REPLY