In this "jquery validation" series article I will tell you about the validation of the radio button. This validation of the radio button can be changed as per the condition or requirement. The basic validation of the radio button is whether the radio button is "checked" or not.
What is Radio Button
The radio button is a type of input element that is mainly used in the form of a web page. In this, the user is given some options in which the user has to select an option. Like in the "checkbox," the user can check multiple options but in the radio button, only one option can be selected.
Validation Scenario
The basic validation of the radio button is whether the radio button is "checked" or not. The scenario for validation depends on the type of radio button, the type of radio can be a "single button" or a "radio button".
Single Radio Button
If a validation form has a single radio button that has no relation with other fields, then it can be understood like this:
For example, a form has a radio button for "Gender" or "Language".
If 2 options are given for gender: "Male" and "Female", the user has to choose one option, but both of these are independent of each other, not dependent on each other.
Example:
Gender:
( ) Male
( ) Female
Here, the user has to choose his gender, but these options are "Male" or "Female", there will be no direct impact from each other, just one option has to be chosen.
String validation is simple and happens for a single field.
Single Radio Button Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RAYS CODING : Radio Button Validation</title>
<link rel="stylesheet" href="../style.css">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-zinc-950 flex justify-center">
<section class="w-auto h-auto mt-28 bg-white">
<header class="bg-violet-600 p-5 pl-6 pr-6">
<h2 class="text-3xl text-white tracking-wider">RAYS CODING : jQuery Radio Button Validation</h2>
</header>
<form action="#" method="post" class="p-5">
<Label>Language</Label>
<div class="mt-5">
<label class="block">
<input type="radio" name="language" value="english" class="language-radio">
English
</label>
<label class="block">
<input type="radio" name="language" value="spanish" class="language-radio">
Spanish
</label>
<label class="block">
<input type="radio" name="language" value="french" class="language-radio">
French
</label>
<label class="block">
<input type="radio" name="language" value="german" class="language-radio">
German
</label>
<label class="block">
<input type="radio" name="language" value="chinese" class="language-radio">
Chinese
</label>
</div>
<div class="mt-5 bg-red-300 p-3 text-red-950 hidden" id="message"></div>
<button type="submit" class="mt-5 bg-violet-600 p-3 w-full text-white font-semibold tracking-wider" id="submit-button">SUBMIT</button>
</form>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>
This HTML code creates a simple form with radio buttons for the user to select a "language". The form has 5 different languages: English, Spanish, French, German and Chinese. There is a radio button for each language that the user can select.
There is also a "Submit" button at the bottom of the form, which the user will click when they are done with their selection. If the user does not select a language and submits, an error message (which is initially hidden) will be displayed.
The code uses jQuery, but it is not jQuery code. The code is just structure and HTML elements, with no validation or JavaScript functionality.
jQuery Validation Code
<script>
$(document).ready(function () {
$('#submit-button').on('click', function (e) {
e.preventDefault();
let selectedLanguage = $('input[name="language"]:checked').val();
if (!selectedLanguage) {
$('#message').removeClass('hidden bg-green-300 text-green-950').addClass('bg-red-300 text-red-950')
.text('Please select a language.').fadeIn().delay(3000).fadeOut(function () {
$(this).addClass('hidden');
});
} else {
$('#message').removeClass('hidden bg-red-300 text-red-950').addClass('bg-green-300 text-green-950')
.text('You have selected: ' + selectedLanguage.toUpperCase() + '.').fadeIn().delay(3000).fadeOut(function () {
$(this).addClass('hidden');
});
}
});
});
</script>
This JavaScript code uses jQuery, which has a validation process set up. When the user clicks the "Submit" button, the code will first prevent the form from being submitted (e.preventDefault()). Then, the code checks that the user has not selected a language. If the user has not selected a language, an error message will be displayed which will be in red color, and the message will say "Please select a language." This message will be displayed for 3 seconds and then will be hidden.
If the user has selected a language, a success message will be displayed which will be in green color, and the message will say "You have selected: [a selected language]." This message will also be displayed for 3 seconds and then will be hidden automatically. Thus, the code validates the user's input in the form and selects the language according to the feedback.
Group Validation Code
When a form has more than one radio button and the second radio button depends on the first radio button, it means that the selection of one button depends on the selection of the second button.
Suppose, on selecting one radio button, the option of the second radio button changes or gets disabled.
Suppose there is a form that has two types of radio buttons: one for "Gender" and the other for "Age Group".
Example:
- Gender:
- Male
- Female
- Age Group:
- Under 18
- 18-30
- 30-50
- 50 and above
If the "Female" radio button is selected, then "Under 18" and "50 and above" will be disabled in the "Age Group" options, as these age groups are not applicable to females.
This way, the second radio button (Age Group) will depend on the selection of the first radio button (Gender).
Group Radio Button Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RAYS CODING : Radio Button Validation</title>
<link rel="stylesheet" href="../style.css">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-zinc-950 flex justify-center">
<section class="w-auto h-auto mt-28 bg-white">
<header class="bg-violet-600 p-5 pl-6 pr-6">
<h2 class="text-3xl text-white tracking-wider">RAYS CODING : jQuery Radio Button Validation</h2>
</header>
<form action="#" method="post" class="p-5">
<div class="gender_container">
<Label>Gender</Label>
<div class="mt-1">
<label class="block">
<input type="radio" name="gender" value="female" class="gender-radio">
Female
</label>
<label class="block">
<input type="radio" name="gender" value="male" class="gender-radio">
Male
</label>
</div>
</div>
<div class="age_container mt-5">
<Label>Age</Label>
<div class="mt-1">
<label class="block">
<input type="radio" name="age" value="under18" class="age-radio">
Under 18
</label>
<label class="block">
<input type="radio" name="age" value="18-30" class="age-radio">
18 - 30
</label>
<label class="block">
<input type="radio" name="age" value="30-50" class="age-radio">
30 - 50
</label>
<label class="block">
<input type="radio" name="age" value="50andabove" class="age-radio">
50 and above
</label>
</div>
</div>
<div class="mt-5 bg-red-300 p-3 text-red-950 hidden" id="message"></div>
<button type="submit" class="mt-5 bg-violet-600 p-3 w-full text-white font-semibold tracking-wider"
id="submit-button">SUBMIT</button>
</form>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>
This HTML and JavaScript code creates a form that shows radio buttons for gender (male/female) and age (under 18, 18-30, 30-50, 50 and above). When the user submits the form, jQuery is used to validate if the user has selected an option in both the fields (gender and age). If none of the fields are selected, an error message will be displayed.
This code also uses Tailwind CSS which is used for styling like background color, padding, and button design. The error message is displayed in a red color box, which is hidden by default and is shown only if the validation fails.
When submitting the form, if the user has not selected any of the required fields, a red error message will be displayed saying, “Please select both gender and age” or something similar, which will remind the user to give the correct input.
Group jQuery Validation Code
<script>
$(document).ready(function () {
$('#submit-button').on('click', function (e) {
e.preventDefault();
let selectedGender = $('input[name="gender"]:checked').val();
let selectedAge = $('input[name="age"]:checked').val();
if (!selectedAge && !selectedGender) {
$('#message').removeClass('hidden bg-green-300 text-green-950').addClass('bg-red-300 text-red-950')
.text('Please select both gender and age.').fadeIn().delay(3000).fadeOut(function () {
$(this).addClass('hidden');
});
} else if (!selectedAge) {
$('#message').removeClass('hidden bg-green-300 text-green-950').addClass('bg-red-300 text-red-950')
.text('Please select an age.').fadeIn().delay(3000).fadeOut(function () {
$(this).addClass('hidden');
});
} else if (!selectedGender) {
$('#message').removeClass('hidden bg-green-300 text-green-950').addClass('bg-red-300 text-red-950')
.text('Please select a gender.').fadeIn().delay(3000).fadeOut(function () {
$(this).addClass('hidden');
});
} else {
$('#message').removeClass('hidden bg-red-300 text-red-950').addClass('bg-green-300 text-green-950')
.text('You selected Gender: ' + selectedGender + ' and Age: ' + selectedAge + '.').fadeIn().delay(3000).fadeOut(function () {
$(this).addClass('hidden');
});
}
});
});
</script>
This code is written for a web page that asks the user to select gender and age. When the user clicks on the "Submit" button, this code checks if the user has selected gender and age. If the user has not selected either of the things, a message is displayed.
If both selections (gender and age) are made, a positive message is displayed displaying the user's gender and age. If any of the selections is missed, an error message is displayed, such as "Please select gender" or "Please select age."
The important thing in the code is that whenever the message is shown, it will stay on the screen for 3 seconds, then slowly disappear. The error and success messages are shown in different color schemes: red background for error and green background for success.