Embed Size (px)
Citation preview
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 : <form method=“post/get” action=“. . .”> . . . </form>
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 <FORM></FORM>, tapi juga bisa
meletakkan control diluar tag tersebut. Untuk menambahkan control gunakan tag <input>.
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 :
Masukkan kode program dibawah <body> html :
<SCRIPT LANGUAGE = "JavaScript"><!-- function cekNama(form) { if (form.elements[0].value == "" || form.elements[1].value == "") { alert("Nama dan alamat harus dimasukkan"); form.nama.focus(); form.nama.select(); return(false); }
alert("Terima kasih, " + form.elements[0].value); return(true); }//--></SCRIPT>
Kemudian masukkan kode berikut pada bagian <form>:<FORM NAME = "formku">
<PRE> </PRE><table width="329" border="0">
<tr> <td width="80">Nama </td> <td width="169"><input type = "TEXT" name = "nama" /></td> <td width="66"> </td> </tr> <tr> <td>Alamat</td> <td><input type = "TEXT" name = "alamat" /></td> <td> </td> </tr> <tr> <td> </td> <td><input type = "BUTTON" value = "Kirim" onclick = "cekNama(this.form)" /></td> <td> </td> </tr> </table>
<PRE><BR><BR></PRE></FORM>
Ketika tombol Kirim ditekan tanpa mengisi nama atau alamat, maka akan muncul tampilan berikut:
Jika semua form sudah terisi, maka akan muncul tampilan berikut:
2. Mengecek Password
Langkah-langkah untuk mengecek password antara berikut :
Buat tampilan berikut :
Masukkan kode program berikut :<SCRIPT LANGUAGE = "JavaScript"><!-- function cekPassword() { if (document.formTes.password_1.value != document.formTes.password_2.value) alert("Dua password yang Anda masukkan tidak sama"); else window.location.href = "tesform.htm"; }//--></SCRIPT>
Kemudian pada bagian Form, masukkan kode berikut :<FORM NAME = "formTes" ACTION = "tesform.htm" METHOD = "POST">
<table width="329" border="0"> <tr> <td width="155"><strong>Password</strong> </td> <td width="152"><input type = "Password" name = "password_1" /></td> <td width="8"> </td> </tr> <tr> <td><strong>Confirm Password</strong></td> <td><input type = "Password" name = "password_2" /></td> <td> </td> </tr> <tr> <td> </td> <td><INPUT TYPE = "BUTTON" NAME = "tombolProses" VALUE = "Proses" onClick = "cekPassword()"></td> <td> </td> </tr>
</table><PRE><BR><BR></PRE>
</FORM>
Jika kedua password yang dimasukkan tidak sama, maka akan muncul tampilan
berikut:
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:
Semua kolom harus diisi dengan Ketentuan sebagai berikut :
Nama harus berupa huruf
Alamat hanya berisi huruf dan angka
Kode pos harus berupa angka
Jns kelamin harus dipilih
Username harus diisikan antara 6 sampai 8 karakter (gabungan huruf maupun angka)
Password minimal 8 karakter (boleh gabungan huruf dan angka) Email harus dgn format yg benar (ada @, contoh : [email protected])
