validasi web form dengan javascript secara real time


validasi web form berguna untuk memeriksa apa yang diinput atau dimasukan ke dalam form mempunyai format yang sesuai. misalnya, pada form ada field input nama, maka format yang benar seharusnya berisikan nama atau huruf a sampai z. tidak menggunakan angka 0 sampai 9. Contoh lainnya adalah pada field input telephone, formatnya menggunakan angka, tidak ada huruf a - z . Namun demikian, pengunjung situs atau mereka yang memasukan data ke dalam form, biasanya asal saja.. tidak memeriksanya lagi, atau memang sengaja dengan mengisi data yang salah. Nah, validasi form inilah yang berfungsi untuk memeriksa apa yang diketikan ke dalam form, dan memberi peringatan secara langsung apabila yang diisikan ke dalam form salah.

pesan peringatan tersebut misalnya:

" tidak boleh kosong" ... "harus diisi dengan angka, tidak boleh huruf" ... "harus diisi minimal 8 karakter" ... "harus diisi dengan alamat email yang valid" .... dan sebagainya.

bisa dilihat demo validasi form seperti di bawah ini

validasi form menggunakan javascript

 

ok, langsung saja ke tutorialnya yah ... tutorial ini berdasarkan tutorial yang berada di livevalidation.com

yang pertama kali adalah dengan mendownload file js javascript dari livevalidation, dan menyimpannya di folder dimana file web form disimpan.

lalu, masukan code berikut diantara head

 

langkah berikutnya adalah, membuat form di halaman html atau php anda. Untuk membuatnya, saya anggap semuanya sudah bisa.

 nah, sekarang lihat dalam contoh code html form di atas, tiap input mempunyai id sendiri-sendiri.

misalnya field input nama mempunyai id= nama,

field input email mempunyai id = email

dan field input alamat mempunyai id= alamat.

itu berguna untuk mengidentifikasi field mana yang harus divalidasi, jadi ini sangat penting, bahwa setiap input mempunyai id sendiri-sendiri. langkah terpenting berikutnya adalah memasukan kode validasi di bawah field input. ada beberapa code validasi yang bisa dipilih di livevalidation.com , misalnya validasi presence yaitu validasi untuk field input tidak boleh kosong.

oke, contohnya seperti ini :

 

perhatikan, ada 3 tulisan nama , di situ. itu adalah nama id untuk nama. sedangkan presence adalah jenis validasinya, yang artinya tidak boleh kosong, atau harus ada isinya. dengan demikian, input dengan id=nama harus ada isinya atau tidak boleh kosong.

code javascript tersebut diletakan di bawah input yang divalidasi, jangan lupa untuk menyesuaikan id dari field inputnya.

contoh coding lengkap dalam form seperti ini:

saya menggunakan validasi presence untuk field input nama dan alamat, sedangkan untuk email menggunakan validasi email. contoh code script javascript dan macam-macam validasi selain email dan presence, dapat dilihat di livalidation

 

hasilnya akan seperti gambar di bawah ini,

validasi form

download contoh script validasi form dengan javascript , password: bayuajie.com



jasa edit template blogspot, modifikasi web dan blog