Radio Button validation with jQuery

Question

I have a jQuery validation on text field which is working fine but when I apply it on radio button then it don't work. I don't know where I'm wrong.

my HTML and jQuery code is,

<input type="text" placeholder="Name" name="name" id="name">
<input type="radio" name="gender" id="gender" value="1">
<input type="radio" name="gender" id="gender" value="2">

var name= jQuery('#name').val();
var gender= jQuery('#gender').val();
if(name.length == 0){
    var error = true;
    jQuery('#name_error').fadeIn(500);
    }else{
    jQuery('#name_error').fadeOut(500);
}
if(gender.value == 0){
    var error = true;
    jQuery('#gender_error').fadeIn(500);
    }else{
    jQuery('#gender_error').fadeOut(500);
}

Krish R · Answer 1 · 2013-12-25T08:50:02.653

1

To get Radio value,

var gender =  jQuery('input[name=gender]:checked').val();


if(!jQuery('input[name=gender]').is(":checked")){
    var error = true;
    jQuery('#gender_error').fadeIn(500);
    }else{
    jQuery('#gender_error').fadeOut(500);
}

edited Dec 25 '13 at 08:50

answered Dec 25 '13 at 08:33

Krish R

21,556
6
47
57

It doesn't allow me to submit form until i choose radio button, but when i dont choose button it doesn't show me any error – Arif Dec 25 '13 at 08:38
yes its working but I want to show the error also if the user left the radio button blank. so what should I put in this line "if(gender.value == 0){ var error = true;" – Arif Dec 25 '13 at 08:46
Updated Answer can you please check – Krish R Dec 25 '13 at 08:51
It doesnt work still, I solved it and post my answer as well. Thank you so much for your effort :) – Arif Dec 25 '13 at 09:09

score 1 · Answer 2 · answered Dec 25 '13 at 08:33

1

Don't use same ID's for multiple elements.

HTML:-

<input type="radio" name="gender" value="1">
<input type="radio" name="gender" value="2">

JS:-

$("input[name=gender]:checked").val()

answered Dec 25 '13 at 08:33

Aditya Singh

9,118
5
30
53

score 1 · Answer 3 · answered Dec 25 '13 at 08:37

because both of your radio button have the same id, Id must be unique. If you want to check radio button clicked or not then try:

$("input[name=gender]").is(":checked")

another thing one of radio button always be clicked so you dont need to validate it, but you need to check male or female.

to set default check:

<input type="radio" name="gender" class="gender" checked="checked" value="1">

score 1 · Answer 4 · answered Dec 25 '13 at 08:45

1

You are using same IDs multiple times. IDs cannot be same. They must be unique.

Use prop() to detect if radio button is checked or not. It returns boolean value.

JS:

$('#name_error,#gender_error').fadeOut();
var name = jQuery('#name').val();    
if (name.length == 0) {
    jQuery('#name_error').fadeIn(500);
}
if(!($("input[name='gender']").prop("checked"))){
    $('#gender_error').fadeIn(500);
}

DEMO here.

answered Dec 25 '13 at 08:45

Hiral

14,954
11
36
57

you are using name of the field then whats the problem if I use same ID, I think it doesn't matter – Arif Dec 25 '13 at 09:01
1

Brush up your HTML basics. [This link might help you](http://stackoverflow.com/questions/7470268/html-input-name-vs-id) – Hiral Dec 25 '13 at 09:05
I solved it and posted my answer also, your idea really helped me :) – Arif Dec 25 '13 at 09:08

Dmitriy.Net · Answer 5 · 2013-12-25T08:38:57.647

If you want validate Checkboxes and ridiobuttons use jquery is() and validate :checked parameter

<input type="text" placeholder="Name" name="name" id="name">
<input type="radio" name="gender" id="gender" value="1">
<input type="radio" name="gender" id="gender" value="2">

var name= jQuery('[name=name]');    
var gender= jQuery('[name=gender]');
if(!name.is(':checked')){
    var error = true;
    jQuery('#name_error').fadeIn(500);
}else{
    jQuery('#name_error').fadeOut(500);
}
if(!gender.is(':checked')){
    var error = true;
    jQuery('#gender_error').fadeIn(500);
}else{
    jQuery('#gender_error').fadeOut(500);
}

score 0 · Answer 6 · answered Dec 25 '13 at 08:33

Try:

<input type="radio" name="gender" class="gender" value="1">
<input type="radio" name="gender" class="gender" value="2">

<script>
var checked = $('.gender:checked');
if(checked.length == 0) {
    var error = true;
    $('#gender_error').fadeIn(500);
} else {
    $('#gender_error').fadeOut(500);
}
</script>

score 0 · Answer 7 · answered Dec 25 '13 at 08:36

You have the same id gender in 2 elements its wrong. Try to change:

<input type="text" placeholder="Name" name="name" id="name">
<input type="radio" name="gender" class="gender" value="1">
<input type="radio" name="gender" class="gender" value="2">

var name= jQuery('#name').val();
var gender= jQuery('.gender').val();
if(name.length == 0){
    var error = true;
    jQuery('#name_error').fadeIn(500);
    }else{
    jQuery('#name_error').fadeOut(500);
}
if(gender.value == 0){
    var error = true;
    jQuery('#gender_error').fadeIn(500);
    }else{
    jQuery('#gender_error').fadeOut(500);

score 0 · Accepted Answer · answered Dec 25 '13 at 09:06

<input type="radio" name="gender" id="gender1" value="1">
<input type="radio" name="gender" id="gender2" value="2">

var gender1=  jQuery('input[id=gender1]:checked').val()
    var gender2=  jQuery('input[id=gender2]:checked').val()

    if(!($("input[id='gender1']").prop("checked"))){
        if(!($("input[id='gender1']").prop("checked"))){
        var error = true;
        jQuery('#gender_error').fadeIn(500);  

        } else { jQuery('#gender_error').fadeOut(500); }

    } else {
        jQuery('#gender_error').fadeOut(500);
    }

Radio Button validation with jQuery

8 Answers8