Cara Validasi radio button array dengan Jquery
Halo Sahabat senterwebs.com , Artikel kali ini admin akan membahas atau share Bagaimana Cara Membuat Validasi Input Type Radio dalam data array? . Dalam hal ini mungkin akan lebih mudah dipahami jika kita langsung ke Contoh kasus dalam pembuatan aplikasi quiz atau quisionaire.... Dimana kita memerlukan validasi setiap jawaban dari pertanyaan dalam Bentuk pilihan Ganda / Objektif (A , B , C , D)atau terkadang bisa juga dalam bentuk 2 jawaban "YA" atau "Tidak" , ini dilakukan agar semua pertanyaan dari soal yang ada dijawab oleh user.
Oleh karena itu , kita membuat validasi radio dimana tentuny data nya di tampilkan atau di ambil dari database
Berikut contoh Script nya
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#radioValidate').click(function(){
var check = true;
$("input:radio").each(function(){
var name = $(this).attr("name");
if($("input:radio[name="+name+"]:checked").length == 0){
check = false;
}
});
if(check){
$("#myForm").submit(); // Submit the form
}else{
alert('Harap Di Isi Semua !!.');
}
});
});
</script>
<h1>Pertanyaan</h1>
<form name="form1" method="post" id="myForm" action="jawab.php" >
<input type="radio" name="ques1" value="1" />Option 1
<input type="radio" name="ques1" value="2" />Option 2
<h1>Question 2</h1>
<input type="radio" name="ques2" value="1" />Option 1
<input type="radio" name="ques2" value="2" />Option 2
<h1>Question 3</h1>
<input type="radio" name="ques3" value="1" />Option 1
<input type="radio" name="ques3" value="2" />Option 2<input type="button" id="radioValidate" value="Validate"/>
</form>
Contoh 2
<h3>Validasi Radio Button array PHP MYSQli
<br>Senterwebs.com</h3>
1. <input type="radio" value="a" name="questions[0]">Pilihan 1
<input type="radio" value="b" name="questions[0]"> Pilihan 2
<br />
2. <input type="radio" value="a" name="questions[1]"> Pilihan 1
<input type="radio" value="b" name="questions[1]"> Pilihan 2
<br />
<button id="test">Proses</button>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script type="text/javascript">
var rgroups = [];
$('input:radio').each(function(index, el) {
var i;
for (i = 0; i < rgroups.length; i++)
if (rgroups[i] == $(el).attr('name')) return true;
rgroups.push($(el).attr('name'));
});
rgroups = rgroups.length;
$('#test').click(function() {
if ($('input:radio:checked').length < rgroups) alert('Harap diisi semua.');
else alert("You're done!");
});
</script>