radio input validation in jquery

Question

I want to validate my radio input by female and male value, how can I it? This in my code:

<span>Gender:</span>
<input type="radio"  name="gender" id="male" />Male
<input type="radio"  name="gender" id="female" />Female
<div id="e4" class="error2">Please choose your gender</div>

Please use a label element associated with each of your radio inputs via for/id attributes ("Associate Labels with Elements") (then an unstyled fieldset and a legend for Gender will be even better but first the labels ^^) — FelipeAls
– FelipeAls, Commented Nov 10, 2015 at 11:05

Rory McCrossan · Accepted Answer · 2015-11-10 07:53:06Z

2

You can use the :checked selector and the length property to make sure an item was selected:

if (!$('input[name="gender"]:checked').length) {
    $('#e4').show(); // display the error div
}

answered Nov 10, 2015 at 7:53

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

2 Comments

Rajesh Dixit Over a year ago

will .length not throw if nothing is selected? length of undefined...

Rory McCrossan Over a year ago

No, the $() construct will always return an object, therefore it will always have a length property.

guradio · Accepted Answer · 2015-11-10 07:54:42Z

2

$(':radio').change(function() {
  if ($(this).is(':checked')) {
    $('#e4').hide()
  } else {
    $('#e4').show()
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span>Gender:</span>
<input type="radio" name="gender" id="male" value="Male" />Male
<input type="radio" name="gender" id="female" value="Female" />Female
<div id="e4" class="error2">Please choose your gender</div>

Try this way

answered Nov 10, 2015 at 7:54

guradio

15.6k4 gold badges39 silver badges65 bronze badges

Comments

Rajesh Dixit · Accepted Answer · 2015-11-10 07:55:44Z

2

Following is the JSFiddle

Code

function validate(){
	var value = $('input[name="gender"]:checked').val();
    if(!value){
    	$("#e4").fadeIn()
    }
}

$("input[name='gender']").on("change", function(){
	$("#e4").fadeOut()
})

.error2{
    color:red;
}

.hide{
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span>Gender:</span>
<input type="radio"  name="gender" id="male" />Male
<input type="radio"  name="gender" id="female" />Female
<div id="e4" class="error2 hide">Please choose your gender</div><br/>
<button onclick="validate()">Validate</button>

answered Nov 10, 2015 at 7:55

Rajesh Dixit

25.1k5 gold badges52 silver badges86 bronze badges

Collectives™ on Stack Overflow

radio input validation in jquery

3 Answers 3

2 Comments

Comments

Code

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Code

Comments

Your Answer

Sign up or log in

Post as a guest

Related