validasi form sederhana dengan javascript


form validation with javascript

berhubung pekerjaan di kantor msh dikit, padahal harus menulis utk archive di bln juni, namun tidak menemukan bahan tulisan yg asik, maka dg amat terpaksa saya tulis ini.. sebuah kode sederhana, untuk validasi form dg javascript, hohoho..  warning, kode2 ini tidak dimaksudkan utk programmer tingkat advance, ini hanya sekedar untuk dilihat-lihat dan dicoba-coba aja..

oke yg ini bagian html nya, tinggal di-copy, di-paste, trus di-save dgn nama file: terserah.htm (mungkin kodenya terlihat terpotog, padahal klo udah di-copy and then di-paste, ngga kepotong kok,, dijamin)

<script type='text/javascript' src='validasi.js'></script>
<form name='latihan' method='post' onsubmit='return validasiFormSaatSubmit(this)' action='proses.php'>
 <table>
  <tr>
   <td valign='top' width='100'>Nama Pengguna</td>
   <td valign='top'> : </td>
   <td><input type='text' name='text_nama' onFocus ='getValue(this)' onBlur ='setValue(this)' size='45'></td>
  </tr>
  
  <tr>
   <td valign='top' width='100'>Status Pengguna</td>
   <td valign='top'> : </td>
   <td>
    <input type='radio' value='S' name='radio_status' id='radio_1'>Sudah Menikah<br>
    <input type='radio' value='L' name='radio_status' id='radio_2'>Lajang
   </td>
  </tr>
  <tr>
   <td valign='top'>Kesan</td>
   <td valign='top'> : </td>
   <td><textarea name='textarea_kesan' rows='5' cols='49' onFocus ='getValue(this)' onBlur ='setValue(this)'></textarea></td>
  </tr>
  <tr>
   <td> </td>
   <td> </td>
   <td><input type='submit' name='latihan_submit' value='Kirim'></td>
  </tr>
 </table>
</form>

nah, gimana? sudah di-save? oke sekarang kode yg kedua, ini untuk file bernama: validasi.js, ingat ya, validasi.js, harus sama! klo mau diganti, maka link pada bagian kode yg diatas td yg: src=’validasi.js’ harus diganti juga ya..

function validasiFormSaatSubmit(siForm)
{     
 var alasan = "";
 
 alasan += validasiNamaPengguna(siForm.text_nama);
 alasan += validasiStatusPengguna(siForm.radio_status);
 alasan += validasiKesan(siForm.textarea_kesan);
         
 if (alasan != "") {
  alert("Beberapa field harus dikoreksi:\n" + alasan);
  return false;
 }
 return true;
}
   
function validasiNamaPengguna(isi)
{
 var pesan = "";
 
 if (isi.value == "") {  
  isi.style.background = 'Yellow';
  pesan = "- Silakan masukkan Nama Pengguna.\n";
 } else {
  isi.style.background = 'White';
 }
 return pesan;
}
function validasiStatusPengguna(isi)
{ 
 var pesan = "";
 
 if ((isi[0].checked == false ) && (isi[1].checked == false))
 {
  pesan = "- Silakan pilih Status Pengguna.\n";          
 }      
 return pesan;
}

function validasiKesan(isi)
{
 var pesan = "";
    
 if (isi.value == "") {
  isi.style.background = 'Yellow';
  pesan = "- Silakan masukkan Kesan.\n";
 } else {
  isi.style.background = 'White';
 }
 return pesan;
}

oke, jalankan saja file terserah.htm td, tapi pastikan dia satu folder dgn file validasi.js nya ya.. sip.. sekian saja tulisan kali ini. mudah-mudahan membantu klo lg berurusan dgn validasi form di sisi client..

-just write what you can’t remember, what you can’t tell-

Advertisements

13 Responses

  1. hahaha, tenang aja cenk bulan juni masih panjang kok… gak usah buru2

    *udah males baca kode 😛

  2. Kangen uy, ama kode (serius).

    Disini gw cuma make tool doang, klik-drag-drop-doubleKlik.

  3. @ray: panjang apaan? ini buktinya, udah bulan juli aja.. 🙂

    @irfan: wah kangen beneran fan? boleh tuh klo aku mau outsourcing..

  4. Lumayan bagus untuk dicoba.

  5. amiin..
    trimakasi mas.. ehe.. 😀

  6. kurang mantap. demo gak ada.

    • ahaha..
      iya, maaf mas, soalnya ini pake wordpress, saya belum ngerti bikin page sendiri buat demo.
      tapi itu kodenya tinggal di copy paste doang, insya4jjl jalan kok.. he 😀

  7. Agar datanya bisa disubmit ke database ? ditaruh dimana mas fungsi MySQLnya ?

    Terima Kasih,, Mohon Bantuannya..

    • hmm.. sejauh yg saya tau, klo mau disubmit ke database ga bisa klo hanya pake javascript mas.
      soalnya javascript itu jalannya di client, sedangkan mysql dijalanin di server.
      jadi harus dibantu pake server side script seperti php, asp.net, atau java aplet.
      nanti klo udah ada server side script-nya, baru de bisa digabungin dengan javascript, dikasih ajax, json, nodejs, dll.. 🙂

      • Lho..!!
        lha terus data yang mas buat itu disimpan dimana ?

        btw, ada script proses untuk menyimpan data ke MySQL enggak mas ?
        Maaf Newbie

  8. yang itu belum disimpen, ini hanya untuk validasi di sisi klien aja mas.. 🙂
    nanti kalau ada waktu saya buat post lagi tentang cara menyimpan ke mysql ya mas..
    atau mas bisa lihat contoh2nya di sini:
    http://lmgtfy.com/?q=save+form+data+to+mysql+in+php

  9. Makasi masbro buat tutorialnya. Semoga ilmunya semakin bertambah n barokah 🙂

  10. aamiin, aamiin, ya robbal ‘alamiin..
    trimakasi kembali om bro..
    semoga sukses ya.. 😀

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: