CODEWITHSUNDEEP
javascriptjqueryhtmlformsvalidation
iamhx
iamhx

Reputation: 472

How to validate radio button on HTML forms using jQuery?

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:

enter image description here

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!

Upvotes: 0

Views: 1575

Answers (1)

David
David

Reputation: 1356

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

Upvotes: 1

Related Questions