Pertemuan 11

download report

Transcript Pertemuan 11

PERTEMUAN 11
JAVASCRIPT VALIDATION
TOPIK
OBJEK
 Validasi Form

OBJEK

Objek dari Navigator (Browser)
 JavaScript membagi satu halaman Navigator dalam
berbagai obyek obyek, dengan tujuan untuk
memudahkan akses salah satu dari mereka dan
memanipulasinya dengan cara merubah sifat/kondisi
(properti) mereka.
 Dimulai dari obyek yang paling besar diantara
semuanya, kemudian turun berdasarkan tingkatan
sampai kepada obyek yang diinginkan.
 Obyek paling besar adalah obyek jendela (window)
dari navigator.
 Di dalam obyek jendela, ada satu obyek yang
ditampilkan dalam bentuk sebuah halaman, kita
sebut obyek dokumen atau document
 Halaman itu berisi banyak obyek seperti, formula,
text, image dan lain lainya..
VALIDASI JAVASCRIPT
 Validasi
adalah proses yang dilakukan
untuk mengecek kebenaran (valid tidaknya)
sebuah masukan data pada sebuah
halaman form tertentu
(textbox,radiobox,combobox,dll)
 Pembuatan
program validasi menggunakan
javascript untuk kecepatan disisi komputer
client (bukan sisi web server)
MEMBUAT FOCUS ELEMEN
 Dengan
bantuan method focus() kita bisa
membuat form sedikit lebih user-friendly.
 Kita bisa membuat elemen mana yang
difokuskan pada saat pertama atau yang
input-nya salah.
 Fokus itu artinya mengeset kursor pada
form-elemen tertentu sehingga user tidak
harus lagi menclick elemen yang
bersangkutan sebelum memasukkan
sesuatu.
MEMBUAT FOCUS ELEMEN

Kita bisa melakukan hal ini dengan script yang
sederhana berikut ini:
function setfocus() {
document.first.text1.focus();
}
MEMBUAT FOCUS ELEMEN

Jika hendak membuat focus pada element ini saat
halaman di-load kita bisa menambahkan pada
property onLoad di tag <body> seperti ini:
<body onLoad="setfocus()">
MEMBUAT FOCUS ELEMEN

Lebih lanjut kita dapat melakukan hal sebagai
berikut, yang akan mengeset focus dan juga menselect input :
function setfocus() {
document.first.text1.focus();
document.first.text1.select();
}
FUNGSI YANG DIBUAT SENDIRI

Memvalidasi Masukan pada Formulir
<HTML>
<HEAD>
<TITLE>Validasi Masukan</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!-function cekNama(form) {
if (form.elements[0].value == "") {
alert("Nama harus dimasukkan");
form.nama.focus();
form.nama.select();
return(false);
}
alert("Terima kasih, " +
form.elements[0].value);
return(true);
}
//-->
</SCRIPT>
<FORM NAME = "formku">
<PRE>
Nama : <INPUT TYPE = "TEXT" NAME = "nama"><BR>
<INPUT TYPE = "BUTTON" VALUE = "Kirim"
onClick = "cekNama(this.form)"><BR>
</PRE>
</FORM>
</BODY>
</HTML>
9
OBJEK PASSWORD
<HTML>
<HEAD>
<TITLE>Mengakses Objek password</TITLE>
</HEAD>
<BODY>
<FORM NAME = "formTes"
ACTION = "tesform.htm"
METHOD = "POST">
<PRE>
Password Pengganti : <INPUT TYPE =
"PASSWORD"
NAME = "password_1">
Password Sekali Lagi: <INPUT TYPE =
"PASSWORD"
NAME = "password_2">
</PRE>
<INPUT TYPE = "BUTTON"
NAME = "tombolProses"
VALUE = "Proses"
onClick = "cekPassword()">
</FORM>
<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>
</BODY>
</HTML>