Validasi CheckBox dalam JavaScript

Contoh Kasus:

Saya mempunyai form hobby seperti dibawah ini:

Hobby: 

Renang 

SepakBola 

Shopping 

Kode yang sudah dibuat

<form name=”hobby” action=”tujuan.php” method=”POST” > 

Hobby:<br />

<input type=”checkbox” name=”renang” value=”1″>Renang<br />

<input type=”checkbox” name=”bola” value=”2″>SepakBola<br />

<input type=”checkbox” name=”belanja” value=”3″>Shopping<br />

<input type=”submit” value=”Simpan”>

</form>

Pertanyaan:

Bagaimana cara validasi checkbox diatas, jadi jika user tidak memilih salah satu atau lebih dari checkbox di atas maka keluarkan pesan “Harap isi hobimu” … ?

Jawaban:

Ikutilah langkah berikut ini:

Pembuatan kode JavaScript

Letakkan kode javascript berikut ini dalam tag <head>:

<script type=”text/javascript”> 

function periksaHobby(){

var frm=document.hobby;

var renang=frm.renang.checked;

var bola=frm.bola.checked;

var shopping=frm.belanja.checked;

if(renang==false && bola==false && shopping==false){

alert(“Harap pilih hobymu”);

return false;

}

}

</script>

Keterangan:

  • document.hobby, Kode ini digunakan untuk mengambil attibute name=”hobby” dari form.
  • frm.renang.checked, Kode ini digunakan untuk mengambil status checked dari elemen form yang mempunyai name=’renang’, jika elemen ini dipilih oleh user maka akan mengembalikan nilai true dan jika tidak terpilih maka akan mengembalikan nilai false.

Lalu rubahlah kode pada formmu seperti terlihat pada kode berikut ini:

<form name=”hobby” action=”tujuan.php” method=”POST” onSubmit=”return periksaHobby()”>

Hasil:

Silahkan jalankan filemu melalui browser dan lihat hasilnya.

 

Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura’.

You may also like...

Leave a Reply

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