All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Validate Radio Button JavaScript

Last Updated : Mar 11, 2024

Validate Radio Button JavaScript

In this article we will show you the solution of validate radio button JavaScript, the radio button seems to be a specific kind of graphic element and icon that enables the user to pick one option or choice from a variety of possibilities.

Before submitting the form, the coders check the radio buttons to make sure the user has chosen an option.

Assume you want to submit the application with no options checked. In that case, something will go wrong.

By warning them of mistakes while they submit forms without selecting an option from the radio buttons, it can help to enhance the user experience.

Now move to the concept of validate radio button JavaScript.

Step By Step Guide On Validate Radio Button JavaScript :-

JavaScript validation for radio buttons can be done by using the "checked" attribute of a radio button element.

When a radio button is checked or selected, it returns the boolean value "true," and when it returns "false," it indicates that the button is not checked.

<html>
<head>
<script type="text/javascript">
function validation()
{
 var language = document.form.lang;
 for (var i = 0; i < language.length; i++) {
  if (language[i].checked){
   break;
  }
 }
 if (i == language.length){
 return document.getElementById("error").innerHTML = "Please check any radio button";
}
  return document.getElementById("error").innerHTML = "You select option " + (i + 1);
}
</script>
</head>
<body>
<form name="form" action="#" method=post>
 <b>Select the Language you want to Learn</b><br>
 <br><input type="radio" name="lang" value="html"> HTML
 <br><input type="radio" name="lang" value="css"> CSS
 <br><input type="radio" name="lang" value="JavaScript"> JavaScript
 <br><input type="radio" name="lang" value="Jquery"> Jquery
 <br><br><input type="button" value="Submit" onClick="validation()">
 <p id="error"></p>
</form>
</body>
</html>
  1. HTML and HEAD tags are used as the first lines of code before the script is written.
  2. Next, we write the validation function, which will activate when clicking the submit button and check to see if any options have been selected or not.
  3. Using "form.lang," we then construct a variable with the provided name that contains all of the radio buttons.
  4. Next, we use an if statement to iterate through the radio buttons up to their length and use the "checked" property to determine whether or not each button is checked.
  5. Break the loop when any radio buttons are selected. If none of the buttons are chosen, the message "Please check any radio button" will appear.
  6. Next, we end our script with the SCRIPT tag and begin it with the body, which is the actual code that we want to see on the website.
  7. We develop the form having radio buttons in the body section that allows users to choose whether to learn a particular language.
  8. After that, we develop the submit button and connect it to a "onclick" event that triggers the "validate" ().
  9. Using FORM, BODY, and HTML elements, we close out our code.

Conclusion :-

Thus, we were able to understand the idea of a validate radio button in javascript.

Moreover, we discovered that the "checked" property may be used in JavaScript to validate radio buttons.

The button's selection or deselection will be tested, and a boolean value will be provided for the conditions that are checked or unchecked.

I hope this article on validate radio button JavaScript helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Pragati

Experienced coding content writer who enjoys breaking down complex concepts in programming languages like Java, Python, C, and C++. Over three years of experience producing interesting and relevant content for a variety of entities. Committed to providing concise and easy-to-understand articles that assist readers in easily understanding technology and industry trends in the world of coding and software development.

Follow Pragati On Linkedin 🡪