JAVASCRIPT VALIDATION 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.
document.first.text1.focus(); } 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()">
document.first.text1.focus(); document.first.text1.select(); } Membuat focus elemen Lebih lanjut kita dapat melakukan hal sebagai berikut, yang akan mengeset focus dan juga men- select 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>
Objek Password <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> <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>