Radio button validaton

Question

I am trying to get a couple of radio buttons to validate using JavaScript/HTML, but I am having problems. The piece of script I am having trouble with is as follows -

        if ( ( RegistrationForm.sexm[0].checked == false ) && ( RegistrationForm.sexf[1].checked == false )) 
        {
            alert( "Please select your sex" ); 
            return false;
        }

Basically I want it to return an alert if neither radio button options are selected. At the moment when submitted the form is refreshing itself and not providing any alerts. Any advice would be appreciated!

The relevant HTML I have been provided to work with is -

<form id="RegistrationForm" onsubmit="ValidateForm()" action="">
 <fieldset>
  <legend>Registration Form</legend>
    <label for="username">User Name: </label> 
    <input type="text" class="input" id="username"/><br />
    <label for="password">Password: </label> 
    <input type="password" class="input" id="password"/><br />
    <label for="repassword">Re-Type Password: </label> 
    <input type="password" class="input" id="repassword"/><br />
    <label for="email">Email Address: </label> 
    <input type="text" class="input" size="30" id="email"/><br />
    <label>Age: </label> 
    <select id ="age" name="age">
        <option value=""> --- </option>
        <option value="0-18">0-18</option>
        <option value="18-30">18-30</option>
        <option value="30-50">30-50</option>
        <option value="50+">50+</option>
    </select><br/>
    <label for="sexm">Sex:</label>
    <input type="radio" id="sexm" name="sex" value="male" />Male<br/>
    <label for="sexf">&nbsp; </label>
    <input type="radio" id="sexf" name="sex" value="female" />Female<br/>   
    <input type="checkbox" name="agree"  id="agree" value="agree"/>
    <label for="agree">I accept the <a href="">terms and cond</a>.</label> <br/>
    <label>&nbsp; </label> 
    <input type="submit" value="Submit" class="button" /> 
 </fieldset>
</form>

You are using `&&` in if. So it'll go in `IF` only when both not selected. Have you tried by not selecting any of 'em. — Vicky Thakor, Sep 30 '13 at 06:45
Can u pls have a look: http://stackoverflow.com/questions/18262432/radio-buttons-post-show-value-even-none-of-the-buttons-are-checked-how-to-valida — choudhury smrutiranjan parida, Sep 30 '13 at 06:46
Yeah thats what I am after, I only want an alert if neither box is selected. However even when leaving them both blank, I do not get an alert message. Sorry if I have misunderstood what you mean here! — Sarah Mathews, Sep 30 '13 at 06:47
possible duplicate of [How can I check whether a radio button is selected in javascript?](http://stackoverflow.com/questions/1423777/how-can-i-check-whether-a-radio-button-is-selected-in-javascript) — Shafeeque, Sep 30 '13 at 06:51

zzlalani · Accepted Answer · 2013-09-30T06:58:44.900

Try this code in your javascript <script> tag

function ValidateForm () {
   if ( ( document.getElementById("sexm").checked == false ) && ( document.getElementById("sexm").checked == false )) 
   {
      alert( "Please select your sex" ); 
      return false;
   } else {
      return true;
   }
}

Replace it with your code

if ( ( RegistrationForm.sexm[0].checked == false ) && ( RegistrationForm.sexf[1].checked == false )) 
{
    alert( "Please select your sex" );
    return false;
}

Mr. Alien · Answer 2 · 2013-09-30T06:54:46.700

Use a for loop to check whether your user has selected any value or not, if not, than throw an alert and use return false to prevent your form being submitted.

Demo

var ischecked = null;
var radios = document.getElementsByName('sex');
for (var i = 0; i < radios.length; i++) {
          if (radios[i].checked) {
           ischecked = radios[i];
   }
}
if(ischecked==null) {
    alert('Please choose your Sex');
    return false;
}

Save the above code in the function, and call it on submit of your form.

Demo 2 (Validate on submit)

Note: You need to use onsubmit="return ValidateForm();"

score 0 · Answer 3 · answered Sep 30 '13 at 07:22

try this ...

<script type="text/javascript">
function validate()
{
var o = document.getElementById('sexm');
var t = document.getElementById('sexf');

if ( (o.checked == false ) && (t.checked == false ) )
{
alert ("please select your sex" );

return false;
}
return true;
}
</script>

Radio button validaton

3 Answers3