How to validate radio button on HTML forms using jQuery?

Question

I'm trying to do a form field validation. I got the text fields validation working from here, but not for the radio buttons as I am unsure of where I did wrong.

HTML:

    <div>
    <label>Gender:</label>
    <input type="radio" name="gender" class="gender" value="Female" >Female</input>
     <input type="radio" name="gender" class="gender"  value="Male" >Male</input> <br/>
     <span class="error">This field is required</span>

   </div>

jQuery:

$('.gender').on('input', function() {
var input = $( this );
var is_checked = $("input[name=gender]:checked").length != 0;;
if (is_checked) {$('.gender').removeClass("invalid").addClass("valid");}
else {$('.gender').removeClass("valid").addClass("invalid");}
});

This is the real-time validation code which I played around on. It does not work however. When submitting the form, my error message still shows up regardless of which radio button I choose.

$("#studentsform").submit(function(event) {
var form_data = $("#studentsform").serializeArray();
var error_free = true;
for (var input in form_data){
    var element = $("#"+form_data[input]['name']);
    var valid = element.hasClass("valid");
    var error_element = $("span", element.parent());
    if (!valid) {error_element.removeClass("error").addClass("error_show"); error_free = false;}
    else {error_element.removeClass("error_show").addClass("error");}
    }


if (!error_free) {
    event.preventDefault();
}

else {

idcount++

var Surname = $('#surname').val();
var Name = $('#name').val();
var Gender = $('.gender:checked').val();
var Addr = $('#address').val();
var Email = $('#email').val();
var Phone = $('#phone').val();

$("#tblData tbody").append( "<tr>"+ "<td>" + idcount + "</td>"+ "<td>" + Surname + "</td>"+
 "<td>" + Name + "</td>"+
 "<td>" + Gender + "</td>"+
 "<td>" + Addr + "</td>"+
 "<td>" + Email + "</td>"+
 "<td>" + Phone + "</td>"+
 "<td><button class='btnEdit'>Edit</button><button class='btnDelete'>Delete</button></td>"+ "</tr>"); 

$(".btnEdit").bind("click", Edit); 
$(".btnDelete").bind("click", Delete);
}
});

After checking all real-time validation, on the submit button I do the code above, which is to double check for validations and if it is error free, i append all the inputs into a row.

Preview:

As you can see from the picture above, even after clicking on Insert, my error message still shows up.

The author's code are very structured, but if anyone has a better and simpler way, could you please provide me a sample solution?

Much thanks!

@Ryan89 You're right... sorry about that. I'll change it and see how it goes. — iamhx
– iamhx, Commented May 9, 2016 at 14:29

David · Accepted Answer · 2016-05-09 14:45:39Z

1

Looks like you need

$("input[name=gender]").prop("checked");

which will return a boolean matching the checked value

Edit:

If you want to keep your code the same, you need to add the .valid class to all the gender-classed inputs. This way, when you check one radio, it will make both valid, and you shouldn't get an error.

$('.gender').on('input', function() {
  var input = $( this );
  var is_checked = $("input[name=gender]:checked").length != 0;
  if (is_checked){ 
    $('.gender').removeClass("invalid").addClass("valid");
  } else {
    $('.gender').removeClass("valid").addClass("invalid");
  }
});

edited May 9, 2016 at 14:45

answered May 9, 2016 at 14:25

David

1,3569 silver badges17 bronze badges

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

8 Comments

iamhx Over a year ago

Is this code for the real-time validation or on the submit button? Much thanks for your contribution!

David Over a year ago

either. You can use it to get the boolean value. It will return true if you have checked the radiobutton, and false if not.

Pointy Over a year ago

That will return the value of the "checked" property on the first input with that name. Use the :checked pseudo-class to see if any are checked: $("input[name=gender]:checked").length != 0

iamhx Over a year ago

@Pointy, I replaced the code on my real-time validation. My error message does not show up anymore. However, my else code is not working.

Pointy Over a year ago

@Kuyo What do you mean exactly by "not working"? Does anything happen? Are there errors reported?

|

Collectives™ on Stack Overflow

How to validate radio button on HTML forms using jQuery?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related