Saat akan membuat webpage form validasi, mungkin diantara kita akan berpikir “waduhh… mesti ngerti javascript nih, harus googling2x dulu dehh !”. Beruntunglah anda pemakai Dreamweaver, karena dreamweaver memiliki fitur built-in function javascript untuk form validasi sejak dreamweaver 3.0 keatas..

Form validasi berfungsi mengecek input pengguna agar sesuai dengan format yang sudah kita sediakan di database.. atau menghindari kesalahan user pada saat input. Misalnya format email diharuskan seperti nama@domain.com , atau isian no.telepon harus dengan angka tidak boleh dengan huruf.. dan lain-lain

mari disimak, tutorial singkat berikut ini !

Sebelumnya mungkin anda harus menyiapkan halaman web anda yang tentunya sudah mengandung tag <form> . Buat yang belom sempat membuat , mungkin bisa saja copas langsung dari sini :

<form id=”form1″ name=”form1″ method=”post” action=”">
<table width=”450″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td width=”108″>Nama</td>
<td width=”342″><input name=”nama” type=”text” id=”nama” /></td>
</tr>
<tr>
<td>Email</td>
<td><input name=”email” type=”text” id=”email” /></td>
</tr>
<tr>
<td>No.Telp</td>
<td><input name=”telepon” type=”text” id=”telepon” /></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type=”submit” name=”Submit” value=”Submit” /> <input type=”reset” name=”Submit2″ value=”Reset” /></td>
</tr>
</table>
</form>

kalo sudah save aja… lalu hal yang anda harus lakukan adalah men-select tag element <form> beserta isinya.. dengan cara blok tags elemen <form> di jendela source code atau klik aja form tags dari panel status bar anda

setelah kondisi form aktif ter-select , perhatikan panel behaviors di sebelah kanan . kalo belom muncul aktifkan saja dahulu (ctrl+f4).. teruskan dengan meng-klik tanda ‘+’ di behaviors

begitu keluar menu slide … pilih aja ‘validate form’

setelah itu akan muncul window validate form berisi parameter yang bisa kita setting sebagai validasi form kita

named field merujuk pada nama inputan yang kita buat . dibawahnya terdapat parameter setting :

• value = jika required berarti field isian tidak boleh kosong
• Accept  = kondisi isian benar jika ;
• Anything = semua karakter huruf di benarkan
• Number = hanya boleh di-isi angka
• Email address = isi harus memiliki format email
• Number from = range angka yang dibenarkan (ex.. 1 to 10, isian angka 1 sampai 10 dibenarkan)

Tekan Ok jika sudah.. save lalu lihat hasilnya di browser anda..

dengan demikian form tidak akan diproses sebelum semua isian valid …

terima kasih sudah membaca artikel yang biasa2x ini… selamat ber-eksperiment, salam buat keluarga dirumah !