Radio button validation in jquery

Today, We want to share with you radio button validation in jquery.In this post we will show you radio button validations in jquery for gender, hear for how to validate dropdownlist in jquery on button click we will give you demo and example for implement.In this post, we will learn about How To Set Radio Button Checked Validations In Javascript? with an example.

Read Also:  how to calculate age from date of birth in javascript?

jQuery Validation for Radio Button and Check Box

Example 1: index.html

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#submit').click(function(){
var gender=$('#gender').val();
var color=$('#color').val();
if ($("#gender:checked").length == 0){
$('#dis').slideDown().html('<span id="error">Please choose gender</span>');
return false;
}
if ($("#color:checked").length == 0){
$('#dis').slideDown().html('<span id="error">Please choose color</span>');
return false;
}

});
});
</script>
<style type="text/css">
#dis
{
text-align:center;
height: 25px;
width: 250px;
background-color:#46DAFF;
color:#000;
}
#tex
{
width:120px;
float: left;
}
</style>
</head>
<body>

<fieldset style="width:290px;">
<form method="POST" action="">
<label id="dis" style="width:250px;"></label><br>

<div id="tex">Gender:</div>
<input type="radio" name="gender" id="gender"> Male
<input type="radio" name="gender" id="gender"> Female<br>

<div id="tex">Color:</div>
<input type="checkbox" name="color[]" id="color"> Green
<input type="checkbox" name="color[]" id="color"> Blue
<input type="checkbox" name="color[]" id="color"> Blue

<center><input type="submit" name="submit" id="submit" /></center>
</form>
</fieldset>
</body>
</html>

I hope you get an idea about checkbox validation in jquery.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.