RSS

validasi inputan form dengan javascript

14 Apr

aduh ga terasa aku dah semester akhir karang dah mau nyusun skripsi nih, baru tadi beli buku di gramedia sama ketut adi, kebetulan bikin berbasis web dan mumpung ada temen yang lagi mau belajar bikin web kebetulan aku bisa bantu dikit dikit, baru kemarin bikin validasi form menggunakan javascript, walau agak capek tapi berhasil juga nih hehe.

ini aku posting script nya siapa tau nanti dikemudia hari aku membutuhkan ini ya tinggal buka blog aja, dan untuk temen – temenku, nanti pasti ada yang nanya atau perlu ini  untuk tugas kampus atau bahan skripsi(pastinya… :D). mengingat saya sudah semestar akhir jadi hal hal yang penting seperti ini harus saya abadikan sebagai kenang – kenangan saya. Huh banyak basa basi nih, ok to the point aja, bagi yang mau bikin validasi inputan email, validasi radio botton, validasi combobox dengan javascript,  langkah – langkahnya adalah  sebagai berikut :

1. buat file html seperti ini

<html>
<head>
<title>validasi form dengan javascript</title>
</head>
<body>
<form name=”login” action=”” onSubmit=”return validasi()”>
<table>
<tr>
<td width=”80″>Nama</td>  <td>:&nbsp;&nbsp;<input type=”text” name=”nama” size=”20″ maxlength=”20″ /></td>
</tr>

<tr>
<td width=”80″>Email</td> <td>:&nbsp;&nbsp;<input type=”text” name=”email” size=”20″ maxlength=”20″/></td>
</tr>
<tr>
<td width=”80″>Jenis kelamin</td> <td>:&nbsp;&nbsp;<input type=”radio” name=”jk” value=”pria”> Pria <input

type=”radio” name=”jk” value=”wanita”>Wanita</td>
</tr>

<tr>
<td width=”80″>Pekerjaan</td>
<td>:&nbsp;&nbsp;<select id=”pekerjaan” name=”pekerjaan” >
<option value=”kosong” selected=”selected”>pilih</option>
<option value=”pelajar”>pelajar</option>
<option value=”swasta”>swasta</option>
<option value=”PNS”>PNS</option>
</select></td>
</tr>
<tr>
<td></td><td>&nbsp;&nbsp;<input type=”reset” value=”clear”> <input type=”submit” value=”send”></td>
</tr>
</table>
</form>
</html>

2. Lalu ini code javascriptnya  seperti ini:
function validasi ()
{
//validasi inputan text nama
var nama= document.login.nama.value;
if(nama==””){
alert(“Tut, kamu belum memasukan nama! silahkan masukan nama dulu.”);
document.login.nama.focus();
return false;
}

//validasi inputan email
var x=document.login.email.value;
var atpos=x.indexOf(“@”);
var dotpos=x.lastIndexOf(“.”);
if (x==””)
{
alert(“Tolong isi emailnya tut!”);
document.login.email.focus();
return false;
}
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert(“Tut, Format emailnya tidak benar tuh! Tolong ketik yang benar”);
return false;
}

//validasi inputan radio
function check_radio(radio)
{
// memeriksa apakah radio button sudah ada yang dipilih
for (i = 0; i < radio.length; i++)
{
if (radio[i].checked === true)
{
return radio[i].value;
}
}
return false;
}

var radio_val = check_radio(login.jk);

if (radio_val === false)
{
alert(“Jenis kelami belum kamu pilih Tut, ingat pilih dulu biar jelas! atau kamu?? hehe”);
return false;
}

//validasi inputan combobox
var kerja=(login.pekerjaan.value);
if (kerja==”kosong”)
{
alert(“Kolom pekerjaannya belu kamu isi Tut, jangan pikun gitu dong kamu dah semster akhir karang tau!”);
document.login.pekerjaan.focus();
return false;
}

}

3. Seperti postingan saya sebelumnya tentang membuat halaman web sederhana dengan css dan javascript , kita bikin javascriptnya embeded aja (satu halaman dengan html nya) maka tinggal masukan kode javascript tadi ke halaman index.html, taruh dibawah tag </header>, maka script lengkapnya seperti ini :

<html>
<head>
<title>validasi form dengan javascript</title>
</head>
<script type=”text/javascript”>
function validasi ()
{
//validasi inputan text nama
var nama= document.login.nama.value;
if(nama==””){
alert(“silahkan masukan nama”);
document.login.nama.focus();
return false;
}

//validasi inputan email
var x=document.login.email.value;
var atpos=x.indexOf(“@”);
var dotpos=x.lastIndexOf(“.”);
if (x==””)
{
alert(“Tolong isi email anda!”);
document.login.email.focus();
return false;
}
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert(“Format email tidak benar”);
return false;
}

//validasi inputan radio
function check_radio(radio)
{
// memeriksa apakah radio button sudah ada yang dipilih
for (i = 0; i < radio.length; i++)
{
if (radio[i].checked === true)
{
return radio[i].value;
}
}
return false;
}

var radio_val = check_radio(login.jk);

if (radio_val === false)
{
alert(“Silahkan pilih jenis kelamin!”);
return false;
}

//validasi inputan combobox
var kerja=(login.pekerjaan.value);
if (kerja==”kosong”)
{
alert(“Tolong pilih pekerjaan”);
document.login.pekerjaan.focus();
return false;
}

}
</script>
<body>
<form name=”login” action=”” onSubmit=”return validasi()”>
<table>
<tr>
<td width=”80″>Nama</td>  <td>:&nbsp;&nbsp;<input type=”text” name=”nama” size=”20″ maxlength=”20″ /></td>
</tr>

<tr>
<td width=”80″>Email</td> <td>:&nbsp;&nbsp;<input type=”text” name=”email” size=”20″ maxlength=”20″/></td>
</tr>
<tr>
<td width=”80″>Jenis kelamin</td> <td>:&nbsp;&nbsp;<input type=”radio” name=”jk” value=”pria”> Pria <input

type=”radio” name=”jk” value=”wanita”>Wanita</td>
</tr>

<tr>
<td width=”80″>Pekerjaan</td>
<td>:&nbsp;&nbsp;<select id=”pekerjaan” name=”pekerjaan” >
<option value=”kosong” selected=”selected”>pilih</option>
<option value=”pelajar”>pelajar</option>
<option value=”swasta”>swasta</option>
<option value=”PNS”>PNS</option>
</select></td>
</tr>
<tr>
<td></td><td>&nbsp;&nbsp;<input type=”reset” value=”clear”> <input type=”submit” value=”send”></td>
</tr>
</table>
</form>
</html>

screenshoot tampilan formnya seperti ini :

  • jika inputan text nama masih kosong :
jika inputan text nama masih kosong

jika inputan text nama masih kosong

jika inputan email tidak valid

jika inputan email tidak valid

jika combo box  pilihan pekerjaan belum dipilih

jika combo box pilihan pekerjaan belum dipilih

jika pilihan jenis kelamin belum dipilih

jika pilihan jenis kelamin belum dipilih

Advertisements
 
Leave a comment

Posted by on April 14, 2011 in CSS, HTML, PHP, Programing

 

Tags: , , , , ,

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: