Validation on radio button : javascript

Question

I have one registration form and want to add validation on gender section radio buttons. My form is like

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

I use below script but not working properly ..

<script type="text/javascript">
     function inputval(){
        if(document.getElementById("gender").checked=="false")
        {
            alert("Select at least male or female.");
            return false;
        }   
    }
    </script>

unable to find problem.

Look in your javascript console and tell us the error message please — Sterling Archer
– Sterling Archer, Commented Mar 22, 2013 at 17:57
See the first answer: set an ID to the input tags because you're selecting the name for an ID, which is selecting nothing. Thus, no error. — Sterling Archer
– Sterling Archer, Commented Mar 22, 2013 at 18:00

J.Vinicius · Accepted Answer · 2013-03-22 18:05:35Z

2

you re getting the element By Id, and 'gender' is your input's name, not the id.
instead of

<input type="radio" value="male" name="gender" /> Male<br />

you should use

<input type="radio" value="male" id="gender" /> Male<br />

edited Mar 22, 2013 at 18:05

answered Mar 22, 2013 at 17:58

J.Vinicius

1481 silver badge7 bronze badges

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

1 Comment

George Over a year ago

Please.. elaborate (: Tell the OP what he/she should be doing.

Adrian Godong · Accepted Answer · 2013-03-22 18:12:06Z

1

Since you tagged this with jquery, use :checked pseudo class selector.

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

edited Mar 22, 2013 at 18:12

answered Mar 22, 2013 at 18:00

Adrian Godong

8,9718 gold badges43 silver badges63 bronze badges

Comments

Jai · Accepted Answer · 2013-03-22 17:59:05Z

0

Try this with :checked:

<script type="text/javascript">
 function inputval(){
    if($(':checked').length < 0)
    {
        alert("Select at least male or female.");
        return false;
    }   
}
</script>

answered Mar 22, 2013 at 17:59

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Comments

Explosion Pills · Accepted Answer · 2013-03-22 18:00:28Z

0

You put jQuery down, so I'll use that. document.getElementById('checked') does not exist. Even if it did, it would only apply to one element. You would have to iterate over each of the [name=gender] elements to see if any is checked. jQuery makes this trivial:

$(".inputval").on('click', function (e) {
    if (!$("[name=gender]:checked").length) {
        alert('something something gender');
        e.preventDefault();
    }
});

http://jsfiddle.net/ExplosionPIlls/s2YfU/

EDIT: non-jQuery solution is also pretty trivial since querySelectorAll('[name=gender]:checked') works too.

answered Mar 22, 2013 at 18:00

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Comments

Venkatasubbaiah Gonepudi · Accepted Answer · 2013-03-22 18:02:06Z

0

There is no need of validation.By default check one radio button

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

answered Mar 22, 2013 at 18:02

Venkatasubbaiah Gonepudi

764 bronze badges

Comments

Rich Wagenknecht · Accepted Answer · 2013-03-22 18:37:00Z

This fiddle could give you some ideas (without jquery). Note that I checked one of the buttons so I could show you that if one is checked, it will set anyChecked to true.

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

var output = document.getElementById("output");
var genderInputs = document.getElementsByName("gender");
var anyChecked = false;

for (var j = 0; j < genderInputs.length; j++) {
    if (genderInputs[j].checked === true) {
        anyChecked = true;
        break;
    }
}

output.textContent = "any checked: " + anyChecked;

http://jsfiddle.net/F8XGU/1/

Collectives™ on Stack Overflow

Validation on radio button : javascript

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related