JavaScript List box validation in submitting a form

We can validate a listbox inside a form by using JavaScript. We will allow the form to be submitted only if the user select one option from the listbox. Our JavaScript function will display one alert window asking user to select one option before submitting the form.

demo of listbox validation
We will display a form with a listbox inside it. Once the form is submitted or input button is clicked we will be execute a function data_check() . Inside this function we will check the length of the selected option like this. First we will store the selected value in string variable.

var str=document.getElementById("l1").value;

The length of the string variable is str.length . Now using this we can submit the form or display the alert message.

Here is the code.

<html><head>
<title>Demo of JavaScript listbox validation in a form</title>
<script type="text/javascript">
function data_check()
{
var str=document.getElementById("l1").value;
if(str.length <=0){
alert("Please select one option ");
}else{
document.forms['drop_list'].submit();// working
}
}
</script>
</head>
<body>
<form name="drop_list" action="listbox-validation-demock.php" method="post" id='f1'>
<select name="Category" id="l1">
<option value=''>Select One</option>
<option value="PHP">PHP</option>
<option value="ASP">ASP</option>
<option value="JavaScript">JavaScript</option>
<option value="HTML with design">HTML</option>
<option value="Perl">Perl</option><option value="MySQL">MySQL</option></select>
<input onclick="data_check()"; value="Submit Form" type="button"> 

</form>

</body></html>

JavaScript Validation

Subscribe to our YouTube Channel here