Tuesday 16 June 2009

Javascript Form Validation

<html>
<head>
</head>
<script language="javascript">

//nama harus diisi
//alamat harus diisi
//jenis kelamin harus diisi
//jurusan harus dipilih
//hobi harus dicentang minimal satu
function validasi(){

var pesan = "";

var nama = formulir.nama.value; //ambil nama
var alamat = formulir.alamat.value; // ambil alamat
var jenis = formulir.jenis; // ambil jenis
var jurusan = formulir.jurusan.selectedIndex; // ambil jurusan
var hobi = formulir.hobi; // ambil hobi

//jika nama kosong
if(nama==""){
pesan += "Nama harus diisi\n";
}
//jika alamat kosong
else if(alamat==""){
pesan += "Alamat harus diisi\n";
}
// jika jenis pria tidak dicentang dan jenis wanita tidak dicentang
else if(jenis[0].checked == false && jenis[1].checked == false){
pesan += "Jenis Kelamin blom dipilih\n";
}
//jika jurusan blom dipilih indexnya 0 , yaitu :pilih jurusan:
else if(jurusan == 0){
pesan += "Jurusan harus dipilih\n";
}
//jika semua hobi tidak dicentang
else if(hobi[0].checked == false && hobi[1].checked==false && hobi[2].checked==false){
pesan += "Hobi harus dipilih\n";
}

//jika pesan kesalahan kosong maka sukses
if(pesan == "")alert("Sukses");
//tampilkan pesan kesalahannya
else alert(pesan);
}
</script>
<body>
<form name="formulir">
<table>

<tr>
<td>Nama</td>
<td>
<input id="nama" type="text">
</td>
</tr>

<tr>
<td>Alamat</td>
<td>
<textarea name="alamat"></textarea>
</td>
</tr>

<tr>
<td>Jenis Kelamin</td>
<td>
<input name="jenis" type="radio">Pria
<input name="jenis" type="radio">Wanita
</td>
</tr>

<tr>
<td>Jurusan</td>
<td>
<select id="jurusan">
<option>::Pilih Jurusan::</option>
<option>Teknik Informatika</option>
<option>Sistem Informasi</option>
<option>Komputerisasi Akuntansi</option>
<option>Manajemen</option>
</select>
</td>
</tr>

<tr>
<td>Hobi</td>
<td>
<input name="hobi" type="checkbox">Makan
<input name="hobi" type="checkbox">Minum
<input name="hobi" type="checkbox">Tidur
</td>
</tr>

<tr>
<td> </td>
<td>
<input type="submit" value="daftar" onclick="validasi();return false;">
<input type="reset" value="reset">

</td>
</tr>

<table>
</form>
</body>
<html>

Untuk komponen input text, textarea, select sebaiknya menggunakan "id". Sedangkan untuk komponen radio button dan checkbox sebaikknya menggunakan "name".
Pada input type="submit" terdapat pemanggilan fungsi javascript validasi(); diikuti dengan return false. Tujuan dari return false ini adalah supaya formnya tidak disubmit kemana mana , karena yang kita butuhkan disini adalah validasi pada halaman ini saja.
Coding diatas hanya dapat dipakai untuk memvalidasi bahwa semua data harus diisi, jika terdapat kriteria lagi seperti alamat harus dengan pola gimana, maka coding diatas perlu ditambahkan logika yang sesuai soal.
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)