Radio buttons in HTML are a type of input element that allows users to select a single option from a list of mutually exclusive choices. They are often used in forms to collect user input when only one option from a set of options can be chosen.
Radio buttons are designed to work as a group, where all radio buttons with the same name attribute belong to the same group and only one option can be selected at a time within that group.
How to validate that at least one button is clicked before submitting a form?
Actually, you don't need Javascript for that. The recommended way is to rely on the browser's form validator by using required. Add required to one of the radio buttons and that will make the radio group mandatory and the browser will not allow the form submittion but instead will show an error.
<form>
Select Car Engine:<br>
<label>
<input type="radio" name="engine" value="diesel" required>
Diesel
</label><br>
<label>
<input type="radio" name="engine" value="petrol">
Petrol
</label><br>
<label>
<input type="radio" name="engine" value="electric">
Electric
</label><br>
<input type="submit">
</form>and here is how the browser handles form submit without choosing at least one radio button.
How to validate with Javascript?
If you still wish to validate radio buttons with Javascript without using required you can have something like the following:
<form id='form' action=''>
Select Car Engine:<br>
<label>
<input type="radio" name="engine" value="diesel">
Diesel
</label><br>
<label>
<input type="radio" name="engine" value="petrol">
Petrol
</label><br>
<label>
<input type="radio" name="engine" value="electric">
Electric
</label><br>
<input type="submit">
</form>
<script>
const form = document.getElementById("form");
form.addEventListener("submit", function (e) {
if(document.querySelector('input[name="engine"]:checked') == null) {
window.alert("You need to choose at least one option!");
e.preventDefault();
}
});
</script>
What this does is check if there is a selected radio button upon form submission, and if there is none, it shows an alert on the user screen.
Fun fact
The term "radio button" in the HTML context was inspired by the physical buttons on radios, where only one button can be pressed at a time to select a specific option or frequency.
