Demo: Radio Button Validation

Click Submit with no option selected to see the validation message. Then choose an option and submit again.

JavaScript Used in This Demo Top ↑

const selected = document.querySelector('input[name="gender"]:checked');
if (!selected) {
  message.textContent = "Please select one radio button before submitting.";
  return;
}
message.textContent = `Validation passed. Selected value: ${selected.value}`;

HTML Used in This Demo Top ↑

<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>
<button type="submit">Submit</button>

← Radio button validation tutorial

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: