Radio buttons and form validation

Forms allow users to submit data in many different ways. A range of form input elements are available including text boxes, checkboxes, radio buttons, and submit buttons. This video tutorial explains how to use radio buttons in a form and also how to use JavaScript to handle the form and validate the data which the user has provided.

Form validation checks whether an option has been selected before the form is submitted. If no option has been selected, then an alert message will tell the user to select an option and the form will not submit the data until an option has been selected.

Watch the video below and then scroll down to see the sample code.

Here is the sample code:

<!DOCTYPE html>
<html lang="en">
 <meta charset="utf-8"/>
 <title>JavaScript - Radio buttons and form validation</title>
 <script type="text/javascript">
 // This file will use form validation for forms with radio buttons
 // Using 'name' in the radio buttons, puts these two radio button options in the same group (the same question)
 // Value is the text displayed next to the radio button that has been selected
 // ID identifies this element which can be used by Javascript code
 // The isChecked function checks to see if an option has been selected before continuing
 // .checked is a property of a radio button (that the radio button has been checked)
 function isChecked(){
 var checkedYes = document.getElementById('like').checked;
 var checkedNo = document.getElementById('dislike').checked;
 if(checkedYes == false && checkedNo == false){
 alert('You need to select an option!');
 return false;
 return true;
<form action="submission.html" method="get" onsubmit="return isChecked();">
 <p>Do you like coding?</p>
 Yes<input type="radio" name="coding" value ="Yes" id="like"/><br/>
 No<input type="radio" name="coding" value ="No" id="dislike"/><br/>
 <input type="submit" value="Submit"/>

Next tutorial: Checkboxes and form validation