the first dropdown required field only not validating. after the first drop-down field selected remaining fields validating. first drop-down only not working. i am using javascript to populate dropdown value from MySQL, please find the error
<div class="form-group col-md-8">
<label></label>
<form name="service" action="bookdat.php" method="get">
<select id="father" name="father" class="form-control" required="required">
<option> Choose...</option>
<?php
//Include database configuration file
include('dat/conn.php');
//Get all country data
$query = $db->query("SELECT * FROM father ORDER BY father ASC");
//Count total number of rows
$rowCount = $query->num_rows;
?>
<?php
if($rowCount > 0){
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['father_id'].'" >'.$row['father'].' </option>';
}
}else{
echo '<option value="">father not available</option>';
}
?>
</select>
</div> <!-- form-group end.// -->
<div class="form-group col-md-8">
<label></label>
<select id="child" name="child" class="form-control" required="required">
<option> Choose...</option>
</select>
</div> <!-- form-group end.// -->
<div class="form-group col-md-8">
<label></label>
<select id="school" class="form-control" name="school" required="required">
<option> Choose...</option>
</select>
</div> <!-- form-group end.// -->
<div class="form-group col-md-8">
<label></label>
<select id="grade" class="form-control" name="grade" required="required" >
<option> Choose...</option>
</select>
</div> <!-- form-group end.// -->
</div> <!-- form-row.// -->
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block"> book service </button>
</div> <!-- form-group// -->