Radio Button Validation In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Dikshita
In this article we will show you the solution of radio button validation in JavaScript, we use the radio button in an HTML form to select one option from a list.
Now we can validate the radio button submission using JavaScript.
We will see one example to validate the radio button using For loop below.
Step By Step Guide On Radio Button Validation In JavaScript :-
<!DOCTYPE html>
<html lang = " en " >
<head>
<meta charset = " UTF - 8" >
<meta http-equiv = " X-UA-Compatible " content = " IE=edge " >
<meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " >
<title> radio button validation in javascript </title>
<style>
body {
font-family : 'Lucida Sans', Verdana , sans-serif ;
}
h1 {
font-size : larger ;
font-weight : bolder ;
color : rgb(113, 221, 113) ;
text-align : center ;
}
h3 {
text-align : center ;
}
</style>
<script>
function validate() {
var valid = false ;
var x = document.myForm.color ;
for (var i=0;i<x.length;i++){
if(x[i].checked) {
valid = true;
break;
}
}
if (valid) {
alert (" Validation Successful ") ;
} else {
alert (" Please Select a colour ") ;
return false ;
}
}
</script>
</head>
<body>
<h1> TALKERSCODE </h1>
<h3> radio button validation in javascript </h3>
<p> Select a colour: </p>
<form action = "dropdown.php" name = "myForm" onsubmit = "return validate()">
<input type="radio" name="color" value="red"> Red
<input type="radio" name="color" value="blue"> Blue
<input type="radio" name="color" value="green"> Green
<input type="radio" name="color" value="yellow"> Yellow
<input type="submit" value="submit"/>
</form>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as the instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As mentioned above, the <head> tag contains information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Now create a < style > tag to add style to the HTML page.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- Create a <form> with the action of a php file, the name of ‘myForm’, and an onsubmit of a function return.
- Now create some <input> tags of the type ‘radio’, and add the name of ‘color’ in all of them.
- Also added <input> tag for submit with the value of ‘submit’
- Now create a <script> tag to write the JavaScript file. And close it with </script> tag.
- Into that <script> tag, create a function named validate (). At first, create a variable named valid equal to false.
- Create another variable x to get the document.myForm.color.
- For the loop to check if the valid is equal to true, then break the loop
- Now create an if-else statement, to check if the radio button validation is valid the display an alert of “validation successful” and if not display “please select a color”.
Conclusion :-
At last, here in conclusion, here we can say that with this article’s help, we know how to radio button validation using JavaScript.
I hope this article on radio button validation in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
