Cara Membuat Validasi pada TextArea

Validasi adalah memberikan batasan minimal dan batas maximal jumlah charakter. Pada Textarea dapat di beri validasi. Untuk lebih jelas mari kita ikuti tutorial berikut ini.

Langkah 1

Buka lembar kerja html baru. Pada jendela dokumen yang masih kosong, tambahkan form dengan memilih menu Insert-Form-Form.

validasi-textarea-1

Langkah 2

Simpan dengan nama Textarea-Validasi.html. Pastikan pointer mouse aktif dalam form, kemudian tambahkan tabel dengan memilih menu insert-tabel. Pada kotak dialog table, lakukan pengaturan untuk tabel, seperti gambar 1 berikut.

validasi-textarea-2

Langkah 3

Aktifkan pointer mouse pada kolom ke 2 tabel dan Tambahkan Spry Validation Textarea. Pilih Spry Validation Textarea.

validasi-textarea-3

Langkah 4

Tampil spry textarea dalam tabel pada gambar 4.

validasi-textarea-4

Langkah 5

Pilih spry textarea, kemudian tentukan minimal dan maxsimal pada panel  Properties. Misal pada min  Hars diisi dengan 10 charakter yang berarti minimal 10 charakter text yang boleh di input pada kotak saran. Pada kotak dialog preview States, pilih Min # of chars Not Met, berikan tanda centang R pada pilihan blur di bagian validate on. Pada gambar 5.

validasi-textarea-5

Langkah 6

Untuk mengganti pesan yang salah, ganti teks yang berada di bawah spry Text area dengan teks  “ Komentar harus diisi lebih dari 10 karakter “.

validasi-textarea-6

Langkah 7

Pada kotak dialog input tag accessibility Atributes yang tampil, berikan ID untuk button dengan nama Uji, kemudian klik OK. Pilih button pda panel Properties ganti nilai Value dengan tekt “Proses OK”.

validasi-textarea-7

Simpan file.

validasi-textarea-8

Selanjutnya aktifkan file tersebut dan isikan charakter kurang dari 10 charakter maka akan tampil pesan  seprti gambar 9.

Hasil akhir

validasi-textarea-9

Sampai disini dulu tutorialnya, sampai jumpa di tutorialnya selanjutnya dan selamat mencoba :).

Fatmariani

Fatmariani adalah seorang Dosen Tetap Program Studi Sistem Infomasi STMIK PalComTech

Leave a Reply

Your email address will not be published. Required fields are marked *

*

[+] kaskus emoticons nartzco


Shares