Radio button validation error in javascript

Question

i have two radio button for selecting gender. and used below JS but if 'female' button is selected it takes it but if 'male' is selected it showing that none is selected.

var r = document.getElementsByName("sex")
var sex= -1;
for(var i=0; i <= r.length; i++)
    {
         if(r[i].checked)
            {
            sex = i; 
            }
    if (sex == -1)
    { 
        alert("please select gender");
        return false;
    }    
}

i have taken two div for two radio with same name for both radio. so here is my html to check if problem is there,

<div style="margin-top:17px; width:92px;float:left;">
   <input id="female" class="radio" type="radio" name="sex" value="female">Female</input>
</div>
<div style="margin-top:17px; width:92px;float:left; margin-bottom:17px;">
   <input class="radio" id="male" type="radio" name="sex" value="male">Male</input>
</div>

Mouser · Accepted Answer · 2015-02-21 13:35:29Z

1

There where some issues.

JavaScript is zero-index based. You ran a loop with i <= r.length, this means that your loop will go outside the node list's boundary. It iterates three times, where it should iterate only two times.
The if statement is in the for loop, it should be outside, since it should only be executed once.

function validate()
{

  var r = document.getElementsByName("sex")

  var sex= -1;
  for(var i=0; i < r.length; i++)
    {
         if(r[i].checked)
         {
            sex = i; 
            break;
         }
    }
    if (sex < 0)
    { 
        alert("please select gender");
        return false;
    }
}

document.querySelector("button").addEventListener("click", validate, false);

<div style="margin-top:17px; width:92px;float:left;">
   <input id="female" class="radio" type="radio" name="sex" value="female">Female</input>
</div>
<div style="margin-top:17px; width:92px;float:left; margin-bottom:17px;">
   <input class="radio" id="male" type="radio" name="sex" value="male">Male</input>
</div>

<button>Validate</button>

edited Feb 21, 2015 at 13:35

answered Feb 21, 2015 at 13:11

Mouser

13.3k3 gold badges30 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sajan Over a year ago

i dont know much about use of snippet but , this showing to select a gender when trying to validate after selecting male.

Mouser Over a year ago

@sajansahoo found some issues I overlooked in your original code. Try it now.

dsuess Over a year ago

'need to be in the same container to work' why this? The selection of this example is given by name and without any child-selectors.

Mouser Over a year ago

@dsuess, wow a long time ago (yet somehow into the future) radios needed to be in the same container. This is no longer so, correct it.

dsuess · Accepted Answer · 2015-02-21 13:47:19Z

Maybe you can simplify the logic and replace for-loop by an more explicit 'selected'-check. Furthermore, please note, to have clickable text labels for radio buttons, to use text, as it is non standard and would not work correctly with most browsers.

function validateFn() {
  if (document.querySelectorAll('[name=sex]:checked').length == 0) {
    alert('please select a sex')
  }
}

document.querySelector('[type=button]').addEventListener('click',validateFn, false);

<form>
  <div>
    <input id="female" class="radio" type="radio" name="sex" value="female" />
    <label for="female">Female</label>
  </div>
  <div>
    <input class="radio" id="male" type="radio" name="sex" value="male" />
    <label for="male">Male</label>
  </div>
  <input type="button" value="validate"/>
</form>

This code will select all elements with name = sex, which are selected. In case of radio buttons this only can be one or nothing. For this selection query "document.querySelectorAll" is used, which is quit mor powerfull than getElementByName/Id/ClassName..., see http://www.w3schools.com/Jsref/met_document_queryselectorall.asp. Also, the selection uses "pseudo-states" or "pseudo-classes", see http://www.w3schools.com/css/css_pseudo_classes.asp

Collectives™ on Stack Overflow

Radio button validation error in javascript

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related