Didin Pe Blog
Belajar Pemrograman Bareng Didin Sino

Validasi Form Dengan Javascript

December 25th, 2009 | 2,584 views | 1 Komentar

Dalam membuat sebuah form tentunya terdapat beberapa field yang wajib untuk diisi. Untuk mengantisipasi user agar tidak mengosongkan field-field tersebut tentunya tidak cukup hanya dengan menambahkan pesan “Field ini wajib diisi, awas ya kalo dikosongkan!!” :D . Dibutuhkan proses validasi untuk mengatasi masalah tersebut. Berikut fungsi javascript untuk validasi form :

function cekinput(fid) {   
  var arrf = fid.split(',');
  var ok = 0;
  for(i=0; i < arrf.length; i++) {
    if(document.getElementById(arrf[i]).value=='') {       
	  ok = 1;
	}
  }
  if(ok == 0)  { return true } else { 
	alert('  Masih ada field yang kosong!  ');
	return false 
  };
}

Tambahkan script diatas pada dokumen tempat form anda berada, terserah mau diletakkan pada bagian head atau body. Setelah itu tinggal tambahkan event “onsubmit” pada formnya “return cekinput(namafield)”.

namafield pada fungsi diatas adalah nama dari field-field yang wajib diisi, dibatasi dengan karakter “,”.  Untuk lebih jelasnya perhatikan script lengkapnya seperti dibawah ini :

<html>
<head>
<script language="javascript">
function cekinput(fid) {   
  var arrf = fid.split(',');
  var ok = 0;
  for(i=0; i < arrf.length; i++) {
    if(document.getElementById(arrf[i]).value=='') {       
	  ok = 1;
	}
  }
  if(ok == 0)  { return true } else { 
	alert('  Masih ada field yang kosong!  ');
	return false 
  };
}
</script>
</head>
<body>
<form method="post" action="" onsubmit="return cekinput('nama,email,telepon');">
Nama <input type="text" id="nama"><br>
Email <input type="text" id="email"><br>
Alamat <input type="text" id="alamat"><br>
Telepon <input type="text" id="telepon"><br>
<input type="submit" value="Kirim">
</form>
</body>
</html>

Keuntungan menggunakan javascript untuk validasi form yakni prosesnya langsung, tanpa perlu me-load halaman prosesnya. Sedang kelemahannya, jika user menonaktifkan javascript pada browser, maka validasi ini tidak akan berfungsi. So, selain javascript sebaiknya proses validasi juga menggunakan php. Validasi menggunakan javascript hanya semata-mata agar user lebih cepat menerima hasil validasinya.

: PHP

: , ,


Baru 1 orang yang kasih komentar

#20/05/2012 | URL: http://didinjo.web.id/validasi-form-dengan-javascript/