Belajar dari Pengalaman



MODUL 7

JavaScript (Validasi Form)

I. TUJUAN PRAKTIKUM

Peserta Praktikum dapat memahami dan mengimplementasikan JavaScript untuk

validasi form

II. TUGAS PENDAHULUAN

1. Apakah yang Anda ketahui tentang Form Validasi?

2. Sebutkan perbedaan utama method Post dan Get dalam Form?

III. LANDASAN TEORI

Form mempunyai fungsi menerima informasi atau meminta umpan balik dari user dan memproses informasi tersebut di server.

Standar penulisan : . . .

|Atribut |Fungsi |

|Method |Metode pengiriman data ke file tujuan (POST atau GET) |

|Action |Aksi yang akan dilakukan jika user menekan tombol Submit |

|Name |Memerikan nama tiap masukan |

|Value |Memberikan nilai suatu masukan |

|Type |Tipe form yang akan digunakan |

Untuk memperbolehkan inputan dari user, form bisa diletakkan control-control input. Semua control biasanya di letakkan di antara tag , tapi juga bisa meletakkan control diluar tag tersebut. Untuk menambahkan control gunakan tag .

Berikut macam-macam component input:

1. Textbox

Untuk membuat sigle line text control. Attribute size digunakan untuk menentukan jumlah character yang bisa ditampilkan, sementara maxlength attribute digunakan untuk menentukan maximum character yang bisa di masukkan.

2. Submit dan Reset

Tombol Submit: digunakan ketika user mengisi form dan ingin mengirimkan ke server.

Tombol Reset: digunakan ketika user ingin menghapus/mengosongkan semua masukan yang ditulis dalam form

3. Checkbox digunakan Untuk memberi beberapa pilihan kepada user

4. Radio button

Radio button digunakan untuk memberi (hanya) satu pilihan kepada user. Setiap radio button control harus memiliki nama yang sama, sehingga user hanya bisa memilih satu option saja. Radio button juga harus secara explisit memberikan nilai ke atribut value.

5. Text Area

Text area digunakan sebagai field masukan untuk pengunjung (dapat menerima lebih dari satu baris teks). Biasa disebut sebagai kotak komentar

6. Daftar Drop Down

Drop down digunakan untuk memberikan menu pilihan kepada user (cara kerjanya seperti radio button yang hanya mengijinkan user untuk memilih 1 pilihan saja)

IV. PRAKTIKUM

1. Membuat Validasi form

Langkah-langkah untuk memvalidasi form antara lain :

• Buat tampilan berikut :

[pic]

• Masukkan kode program dibawah html :

Kemudian masukkan kode berikut pada bagian :

 

Nama

 

Alamat

 

 

 

• Ketika tombol Kirim ditekan tanpa mengisi nama atau alamat, maka akan muncul tampilan berikut:

[pic]

Jika semua form sudah terisi, maka akan muncul tampilan berikut:

[pic]

2. Mengecek Password

Langkah-langkah untuk mengecek password antara berikut :

• Buat tampilan berikut :

[pic]

• Masukkan kode program berikut :

Kemudian pada bagian Form, masukkan kode berikut :

Password

 

Confirm Password

 

 

 

• Jika kedua password yang dimasukkan tidak sama, maka akan muncul tampilan berikut:

[pic]

V. KESIMPULAN

• Form mempunyai fungsi menerima informasi atau meminta umpan balik dari user dan memproses informasi tersebut di server.

• Kontrol input digunakan untuk menerima inputan dari user, seperti : Text Box, radio button, text area, dll.

VI. TUGAS PRAKTIKUM

1. Buat tampilan berikut untuk validasi form:

[pic]

Semua kolom harus diisi dengan Ketentuan sebagai berikut :

• Nama harus berupa huruf

[pic]

• Alamat hanya berisi huruf dan angka

[pic]

• Kode pos harus berupa angka

[pic]

• Jns kelamin harus dipilih

[pic]

• Username harus diisikan antara 6 sampai 8 karakter (gabungan huruf maupun angka)

[pic]

• Password minimal 8 karakter (boleh gabungan huruf dan angka)

• Email harus dgn format yg benar (ada @, contoh : zheira83@)

[pic]

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download