HTML show "please fill out this field" message for Radio Field

Question

I have a form with several inputs, some text, some radio / dropdown fields. All fields are required. For the text input I get a nice message saying "Fill out this field", but for the Radio and Dropdown fields the message doesn't show. How can I show the error message for radio and dropdown fields? Below is my code:

<form action="" method="post" class="form" role="form">
  <div class="form-group required"><label class="form-control-label" for="name">Name:</label>
    <input class="form-control" id="name" name="name" required="" type="text" value="">
  </div>
  <!-- ^ this works  -->

  <div class="form-group required"><label class="form-control-label" for="gender">Gender</label>
    <div class="form-check">
        <input class="form-check-input" id="preference-0" name="preference" type="radio" value="male">
        <label class="form-check-label" for="preference-0">Male</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" id="preference-1" name="preference" type="radio" value="female">
        <label class="form-check-label" for="preference-1">Female</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" id="preference-2" name="preference" type="radio" value="other">
        <label class="form-check-label" for="preference-2">Other</label>
    </div>
  </div>
  <!-- ^ this does not work -->

  <div class="form-group required"><label class="form-control-label" for="choice">
    Please choose "A" or "B"</label>
      <select class="form-control" id="which_day" name="which_day" required="">
        <option value="a">A</option>
        <option value="b">B</option><
      </select>
  </div>
  <!-- ^ neither does this... -->
  
  <input class="btn btn-primary btn-md" id="submit" name="submit" type="submit" value="Next">
</form>

score 0 · Answer 1 · answered Dec 03 '21 at 17:57

I figured it out now, at least for You need to put "required" at one of the radio / one of the dropdown fields like so:

    <div class="form-check">
        <input class="form-check-input" id="preference-0" name="preference" type="radio" value="male" required>
        <label class="form-check-label" for="preference-0">Male</label>
    </div>

And for select fields here is an answer that shows how it can be done.

HTML show "please fill out this field" message for Radio Field

1 Answers1