Validasi form pada saat dikirim ke server dengan javascript
Javascript merupakan bahasa pemrograman yang bejalan disisi klien dan dijalankan langsung oleh browser dikomputer yang mengakses. Semua browser yang ada sekarang dapat menjalankannya. Javascript dikembangkan pertama kali oleh oleh Netscape pada tahun 1995. Tata cara penulisan mirip dengan Java atau C++, tetapi struktur lebih sederhana.
Kali ini saya akan berbagi tentang bagaimana melakukan pengecekan input pada form html yang akan dikirim dan diproses ke server. Proses pengecekan sangat penting agar data yang dikirim benar valid dan sesuai dengan kriteria yang akan diproses. contohnya untuk memastikan bahwa semua Inputan penting sudah diisi.
Misal kita punya sebuah formulir pendaftaran dengan tampilan seperti berikut :
<form id="FDaftar" name="FDaftar" method="post" action="simpan.php">
<p>Nama :
<input name="fnama" type="text" id="fnama" size="30" maxlength="30" />
<br />
Alamat :
<textarea name="falamat" cols="30" rows="3" id="falamat"></textarea>
</p>
<p>
<input type="submit" name="btnKirim" id="btnKirim" value="Kirim" />
<input type="reset" name="btnReset" id="btnReset" value="Reset" />
</p>
</form>
Jika kode diatas dijalankan akan tampil seperti berikut :
Jika tombol kirim ditekan tanpa mengisi nama dan alamat maka form akan langsung dikirim. Bagaimana memberikan warning kepada pengguna pada saat salah satu atau kedua input tidak diisi??? caranya yaitu dengan menambahkan javascript.
Tambahkan kode berikut pada bagian <head>...</head> dokumen html anda.
<script language="javascript">
function CekForm(theForm)
{
if(theForm.fnama.value == "")
{
alert("Ketikkan nama anda!");
theForm.fnama.focus();
return(false);
}
elseif(theForm.falamat.value == "")
{
alert("Ketikkan alamat anda!");
theForm.falamat.focus();
return(false);
}
return(true);
}
</script>
dan terakhir tambahkan kode :
onSubmit="return CekForm(this)"
Pada bagian form yang sudah dibuat.
<form id="FDaftar" name="FDaftar" method="post" action="simpan.php" onSubmit="return CekForm(this)">
Semoga bermanfaat
Zainal Hakim
** Bebas disunting dengan menyebutkan sumber **
