PERTEMUAN 11 JAVASCRIPT VALIDATION TOPIK OBJEK Validasi Form
PERTEMUAN 11 JAVASCRIPT VALIDATION
TOPIK OBJEK Validasi Form
OBJEK Objek dari Navigator (Browser) � Java. Script membagi satu halaman Navigator dalam berbagai 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 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 formelemen 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. text 1. focus(); }
MEMBUAT FOCUS ELEMEN Jika hendak membuat focus pada element ini saat halaman di-load kita bisa menambahkan pada property on. Load di tag <body> seperti ini: <body on. Load="setfocus()">
MEMBUAT FOCUS ELEMEN Lebih lanjut kita dapat melakukan hal sebagai berikut, yang akan mengeset focus dan juga men-select input : function setfocus() { document. first. text 1. focus(); document. first. text 1. select(); }
FUNGSI YANG DIBUAT SENDIRI Memvalidasi Masukan pada Formulir <HTML> <HEAD> <TITLE>Validasi Masukan</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE = "Java. Script"> <!-function cek. Nama(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" on. Click = "cek. Nama(this. form)"><BR> </PRE> </FORM> </BODY> </HTML> 9
OBJEK PASSWORD <SCRIPT LANGUAGE = "Java. Script"> <HTML> <!-<HEAD> function cek. Password() { <TITLE>Mengakses Objek password</TITLE> if (document. form. Tes. password_1. value != </HEAD> document. form. Tes. password_2. value) <BODY> alert("Dua password yang Anda masukkan tidak sama"); <FORM NAME = "form. Tes" else ACTION = "tesform. htm" window. location. href = "tesform. htm"; METHOD = "POST"> } <PRE> //--> Password Pengganti : <INPUT TYPE = "PASSWORD"</SCRIPT> NAME = "password_1"> </BODY> Password Sekali Lagi: <INPUT TYPE = "PASSWORD"</HTML> NAME = "password_2"> </PRE> <INPUT TYPE = "BUTTON" NAME = "tombol. Proses" VALUE = "Proses" on. Click = "cek. Password()"> </FORM>
- Slides: 10
