Why does the required attribute not work for input in HTML?

I am a beginner so I am not aware of any conflicts that my code creates, but what I am trying to do is the following:

If the right option is selected from the dropdown, then an input field should appear and what I cannot seem to work out is to make input mandatory. I have tried adding the required attribute, but people could skip to the next part of the survey without filling in the input box. Adding the attribute class="obligatory" to the input does not help either because if another option is chosen, then the input does not show up and users cannot move on to the next part of the survey because the input field is hidden and obligatory at the same time.

I would be grateful for your help!

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><font size="4">6. Mit welcher Sprache bist Du zuhause aufgewachsen?</font></p>
<select id="selectBox" onchange="changeFunc();">
 <option value ="Bitte">Bitte eine Option ausw&auml;hlen</option>
 <option value="Dialekt">Dialekt</option>
 <option value="Umgangssprache">Umgangssprache</option>
 <option value="Gepflegtes Hochdeutsch">Gepflegtes Hochdeutsch</option>
 <option value="Beides">Beides</option>
</select>

<input name="dd_number" placeholder="Bitte Dialekt angeben" required minlength="1" maxlength="40" class="form-control" type="text" style="display: none" id="textboxes">
 <script type="text/javascript">
  function changeFunc() {
   var selectBox = document.getElementById("selectBox");
   var selectedValue = selectBox.options[selectBox.selectedIndex].value;
    if ((selectedValue=="Dialekt")|(selectedValue=="Beides")){
     $('#textboxes').show();
    }
    else {
     $('#textboxes').hide();
    }
  }

</script>

73 thoughts on “Why does the required attribute not work for input in HTML?”

Leave a Comment