如何使用jQuery验证HTML表单上的单选按钮？

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!

Answer 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");
  }
});