Mesran

Hanya ingin berbagi kebaikan dan mendapatkan kebaikan yang lain.

Validasi Pada Sebuah Form Menggunakan Javascript

Program berikut untuk menvalidasi pengisian data yang di sebuah form. Validasi dilakukan terhadap kekosongan field isian, jumlah angka, serta email.

Nama Program : ValidasiForm.html

<script type="text/javascript">
   function cekData(){
      // Cek Namaisi kotak teks nama
      if (formDaftar.nama.value == ""){
         alert("Nama harus diisi");
         formDaftar.nama.focus();
         return false;
      }

      // Cek isi kotak teks alamat
      if (formDaftar.alamat.value == ""){
         alert("Alamat harus diisi");
         formDaftar.alamat.focus();
         return false;
      }

      // Cek isi kode pos
      if (formDaftar.kodepos.value.length != 5){
         alert("Kode pos harus berisi 5 angka");
         formDaftar.kodepos.focus();
         return false;
      }

      var kar;
      for (var i=0; i<formDaftar.kodepos.value.length; i++){
         kar=formDaftar.kodepos.value.substr(i,1);
         if ((kar <="0") || (kar >= '9')) {
            alert("Kode pos harus berisi 5 angka");
            formDaftar.kodepos.focus();
            return false;
         }
      }

      // Cek email
      if (formDaftar.email.value == ""){
         alert("email haru diisi");
         formDaftar.email.focus();
         return false;
      }

      var filter = new RegExp(
      "^([a-zA-Z0-9_\.\-])+([a-zA-Z0-9])+\@" +
      "(([a-zA-Z0-9\-])+\.)+" +
      "([a-zA-Z0-9]{2,4})+$");
      if (!filter.test(formDaftar.email.value)) {
         alert("email salah");
         formDaftar.email.focus();
         return false;
      } else
         return true;
   }
</script>

<body>
	<form name="formDaftar" method="post"
		  onsubmit="return cekData();">
		<table>
			<tr><td>Nama:</td><td><input type="text" name="nama"
					 maxlength="35" size="35" /></td>
			<tr><td>Alamat:</td><td><input type="text" name="alamat"
					   maxlength="60" size="60" /></td>
			<tr><td>Kode Pos:</td><td><input type="text" name="kodepos"
						 maxlength="5" size="6" /></td>
			<tr><td>e-mail:</td><td><input type="text"
					   name="email" /></td>
			<tr><td colspan="2"><input type="submit"
								   value="Kirim" /></td></tr>
		</table>
	</form>
</body>

Penjelasan
alert() : menampilkan dialog pesan
formDaftar.email.value : mengambil nilai dari textbox email di formDaftar
formDaftar.email.focus(): membuat email di formDaftar menjadi focus

Artikel Terbaru


Advertisements

Filed under: Javascript,

Terima kasih telah memberikan komentar anda.

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

Archives Per Tahun

Sponsored

C&C Online Shop

Blog Stats

  • 390,015 sejak 12 Jan 2011

User’s Online


My Music

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 224 other followers

January 2012
M T W T F S S
« Dec   Feb »
 1
2345678
9101112131415
16171819202122
23242526272829
3031  
%d bloggers like this: