CODEWITHSUNDEEP
javascripthtml
Sarah Mathews
Sarah Mathews

Reputation: 21

Radio button validaton

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>

Upvotes: 0

Views: 256

Answers (3)

Sindhu
Sindhu

Reputation: 473

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>

Upvotes: 0

zzlalani
zzlalani

Reputation: 24344

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;
}

Upvotes: 2

Mr. Alien
Mr. Alien

Reputation: 157284

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();"

Upvotes: 1

Related Questions