Validasi Radio Button Dengan Javascript

21 Januari 2019 Jasa Website Tutorial

Adakalanya Form yang kita buat menggunakan radio button untuk membuat pilihan. Misalnya, memilih jenis kelamin laki-laki atau perempuan.

Agar user tidak melawati pilihan yang kita buat, maka perlu validasi form. Nah, untuk membuat validasi form khusus untuk Radio Button menggunakan Javascript, adalah sebagai berikut.

Langsung saja

<form action="" method="post" name="register_form" id="register_form" enctype="multipart/form-data">

    <div class="text-input">
        <label>Gender: </label>
        <input class="form-control" type="radio" name="gender" id="male" value="male" />
        <label for="male">Male</label>
        <input class="form-control" type="radio" name="gender" id="female" value="female" />
        <label for="female">Female</label>
    </div>
    <div class="text-input" align="center">
        <input type="submit" name="register" value="Submit" onclick="return radioValidation();" />
    </div>

</form>

<script type="text/javascript">
    function radioValidation(){

        var gender = document.getElementsByName('gender');
        var genValue = false;

        for(var i=0; i<gender.length;i++){
            if(gender[i].checked == true){
                genValue = true;    
            }
        }
        if(!genValue){
            alert("Please Choose the gender");
            return false;
        }

    }
</script>

Demikian uraian singkat cara membuat validasi radio button menggunakan javascript, semoga bermanfaat.