Validasi form pada saat dikirim ke server dengan javascript

validasi kirim formJavascript 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 :

Nama :
Alamat :

 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 **

Komentar

Halaman Lainya

  • Perbedaan javascript dan jquery
    Perbedaan antara javascript dan jquery sering menimbulkan pertanyaan, dari segi penulisan maupun penggunaanya. Berikut ini saya akan berbagi tentang apa Perbedaan javascript dan jquery tersebut.
  • Membuat fungsi check uncheck dengan javascript
    Javascript digunakan untuk berinteraksi dengan pengguna secara langsung dengan bantuan browser. Artinya proses tidak perlu dikirimkan lagi ke server. Banyak hal yang dapat kita lakukan dengan javacript, seperti artikel berikut yaitu melakukan check atau uncheck pada checkbox yang ada pada sebuah form.
  • Membuat input hanya angka atau huruf tertentu
    Pada kasus membuat aplikasi web, kadang kita perlu Membuat input hanya angka atau huruf tertentu seperti hanya membolehkan mengisi nilai dari 1 s/d 5 atau huruf dari a s/d e atau karakter tertentu saja atau bahkan kombinasi semuanya.

Kiriman terbaru