Radio Button Validation in Javascript

Radio Button Validation in Javascript mytechlearns
JavaScriptLeave a Comment on Radio Button Validation in Javascript

Radio Button Validation in Javascript

Radio Button Validation in Javascript

Every software need Radio button in many place like gender, department, religion and so many place. Javascript Radio button use for collect those information from the user only check box. Radio button validation is most important this time. Let’s discuss index.php page for Radio Button validation using Javascript:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Radio Check Button Validation Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2 class="text-center">Radio Check Button Validation Example</h2>
  <form class="form-horizontal" id="" name="" action="" method="" onsubmit="return myTechLearns()">

    <div class="form-group">
      <label class="control-label col-sm-2" for="name">Full Name:</label>
      <div class="col-sm-10">
        <input type="name" class="form-control" id="name" placeholder="Enter Your Name" name="name">
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-sm-2" for="gender">Gender:</label>
      <div class="col-sm-10">          
        <div class="form-check form-check-inline">
		  <input class="form-check-input" type="radio" name="gender" id="male" value="male">
		  <label class="form-check-label" for="male"> Male </label>
		</div>
		<div class="form-check form-check-inline">
		  <input class="form-check-input" type="radio" name="gender" id="female" value="female">
		  <label class="form-check-label" for="female"> Female </label>
		</div>
      </div>
    </div>

    <div class="form-group">        
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Submit</button>
      </div>
    </div>
  </form>
</div>

<script type="text/javascript">

	function myTechLearns()
	{
		var name = document.getElementById("name");
		var male = document.getElementById("male");
		var female = document.getElementById("female");

		if (name.value == "") 
		{
			window.alert("Please enter your name."); 
	        name.focus(); 
	        return false; 
		}

		else if ( (male.checked == false) && (female.checked == false) )
		{ 
			window.alert("Please enter your gender."); 
	        male.focus(); 
	        return false; 
		}

		else
		{
			window.alert("Name and Gender Submit Properly"); 
	        return true; 
		}
		
	}

</script>

</body>
</html>

In here, radio button validation by using Javascript id tag value document.getElementById(“”).checked == True. If then validation ok and not true return false so not ok.

That’s all for today. Happy Coding…

Source Code: Click Here

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top