Home » belajar html » validasi inputan email, validasi radio botton, validasi combobox dengan javascript

Javascript adalah salah satu bahasa pemrograman web populer, banyak kasus dapat diselesaikan dengan bantuan javascript, diantaranya untuk validasi inputan form dengan javascript seperti dalam membuat website, maupun sebagai pendukung proses web design, dalam artikel saya ini akan membahas validasi inputan form, 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. 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>

Incoming search terms:

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*

What is 9 + 15 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)
Google+ Plus Follow on Twitter Like On Facebook Email to us

Latest

cara menampilkan kode html dalam postingan
Cara cek artikel yang sudah di index oleh mesin pencari google
Cara disable pesan update notification di wordpress
Cara Merubah URL Login WordPress
menghapus watermark WonderPlugin Slider Free Version 4.3

Recent Posts

Visitor Counter