Dropdown Validation in Javascript

Dropdown Validation in Javascript mytechlearns
JavaScriptLeave a Comment on Dropdown Validation in Javascript

Dropdown Validation in Javascript

Dropdown Validation in Javascript

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Select Option Validation Using Javascript 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">Select Option Validation Using Javascript</h2>
  <form class="form-horizontal" id="" name="" action="" method="" onsubmit="return myTechLearns()">

    <div class="form-group">
      <label class="control-label col-sm-2" for="dept">Department:</label>
      <div class="col-sm-10">
        <select type="text" id="dept" class="form-control" name="dept"> 
        	<option selected value="">Select Your Department</option> 
            <option value="mytechlearns">My Tech Learns</option> 
            <option value="bba">BBA</option> 
            <option value="cse">CSE</option> 
            <option value="eee">EEE</option> 
        </select>
      </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 dept = document.getElementById("dept");

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

		else
		{
			window.alert("Department Select"); 
	        return true; 
		}
		
	}

</script>

</body>
</html>

In here, radio button validation by using Javascript id tag value document.getElementById(“”).value. If value is empty or “” then not ok otherwise 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