Validation for radio button using javascript

Question

I have 2 radio buttons. I need to give validations for radio button using javascript. Please tel me whats wrong with my code. Here is the code.

$(function() {
    $("#XISubmit").click(function(){

        var XIGender= document.forms["XIForm"]["XIGender"].value;
        if (XIGender==null || XIGender=="") { 
             alert("Please select the gender"); 
             return false; 
        }
        document.getElementById("XIForm").submit();
    });

Here is my HTML code:

<label>Gender </label> &nbsp&nbsp
<input type='radio' name='XIGender' value='Male' id="XImale"/>Male
<input type='radio' name='XIGender' value='Female' id="XIfemale"/>Female</td>

Answer 1

One more here,

$(document).ready(function() {
    $("#XISubmit").click(function () {
        if($('input[name=XIGender]:checked').length<=0){
             alert("Please select the gender");
             return false;
         } 
        $( "#XIForm" ).submit();        
     });
});

JSFiddle

Answer 2

Here is the code. You will have to create a form and validate it on submit.

HTML:-

 <form name="myForm" action="targetpage.asp" onsubmit="return validateForm();"   method="post">  
        <label>Gender</label>&nbsp&nbsp  
        <input type='radio' name='XIGender' value='Male' id="XImale" />Male  
        <input type='radio' name='XIGender' value='Female' id="XIfemale" />Female</td>  
        <input type="submit" value="submit" id="XISubmit" />  
    </form>  

JS:-

 function validateForm() {  
        if (validateRadio(document.forms["myForm"]["XIGender"])) {  
            alert('All good!');  
            return false;  
        }  
        else {  
            alert('Please select a value.');  
            return false;  
        }  
    }  

    function validateRadio(radios) {  
        for (i = 0; i < radios.length; ++i) {  
            if (radios[i].checked) return true;  
        }  
        return false;  
    }  

Hope this will help you. :) Enjoy coding.

Answer 3

<form name="formreg" enctype="multipart/form-data" method="post">
    <input type="radio" value="male" name="gender" /> Male<br />
    <input type="radio" value="female" name="gender" /> Female<br />
    <input value="Submit" onclick="return inputval()" type="submit" />
</form>

JS:

   <script type="text/javascript">
    function inputval() {
        var $XIForm = $('form[name=XIForm]');
        if ($("form[name='formreg'] input[type='radio']:checked").length != 1) {
            alert("Select at least male or female.");
            return false;
        }
        else {
            var gender = $("input").val();
            //alert(gender);
            $XIForm.submit();
            alert(gender);
        }
    }
</script>

Answer 4

Use the :checked selector as below

function() {
  var len = $("input:checked").length;
  if(len == 0) {
    alert("Please select a gender");
    return false;
}

see fiddle

Answer 5

You can't get the value of the radio button like that. document.forms["XIForm"]["XIGender"] will return more than one node and you can't get the value property of a list of nodes. Since your using jQuery, this can be made much easier:

$("#XISubmit").click(function () {    
    var $XIForm = $('form[name=XIForm]');
    var XIGender = $XIForm.find('input[name=XIGender]:checked').val();
    if (XIGender == null || XIGender == "") {
        alert("Please select the gender");
        return false;
    }
    $XIForm.submit();
});

JSFiddle