title: How to make radio inputs required?
body: <p>I have radio inputs in a form for the user to select their gender. How do I make gender a required input (user must select either female or male or they get a prompt as per the usual <code>required</code>).</p>
  
  <p>I tried adding <code>required</code> as shown below but it doesn't work (user can continue without selecting either female or male).</p>
  
  <pre><code>              &lt;div class="form-group btn-group" data-toggle="buttons"&gt;
                  &lt;label class="btn btn-default btn-lg"&gt;
                    &lt;input type="radio" name="gender" value="Female" required&gt;&lt;i class="fa fa-female"&gt;&lt;/i&gt; Female
                  &lt;/label&gt;
                  &lt;label class="btn btn-default btn-lg"&gt;
                    &lt;input type="radio" name="gender" value="Male" required&gt;&lt;i class="fa fa-male"&gt;&lt;/i&gt; Male
                  &lt;/label&gt;
                &lt;/div&gt;
  </code></pre>
  
  <h2>Update 1</h2>
  
  <p>As suggested in the answers I updated the code so that only one radio input contains <code>required</code> however it still doesn't work.</p>
  
  <pre><code>              &lt;div class="form-group btn-group" data-toggle="buttons"&gt;
                  &lt;label class="btn btn-default btn-lg"&gt;
                    &lt;input type="radio" name="gender" value="Female" required&gt;&lt;i class="fa fa-female"&gt;&lt;/i&gt; Female
                  &lt;/label&gt;
                  &lt;label class="btn btn-default btn-lg"&gt;
                    &lt;input type="radio" name="gender" value="Male"&gt;&lt;i class="fa fa-male"&gt;&lt;/i&gt; Male
                  &lt;/label&gt;
                &lt;/div&gt;
  </code></pre>
  
  <h2>Update 2</h2>
  
  <p>As requested here is the complete code:</p>
  
  <pre><code>          &lt;form action="/client/index.php" method="post" role="form"&gt;
              &lt;fieldset&gt;
                &lt;div class="form-group"&gt;
                  &lt;input class="form-control input-lg" placeholder="Nickname" name="nickname" type="text" autofocus required&gt;
                &lt;/div&gt;
                &lt;div class="form-group btn-group" data-toggle="buttons"&gt;
                  &lt;label class="btn btn-default btn-lg"&gt;
                    &lt;input type="radio" name="gender" value="Female" required&gt;&lt;i class="fa fa-female"&gt;&lt;/i&gt; Female
                  &lt;/label&gt;
                  &lt;label class="btn btn-default btn-lg"&gt;
                    &lt;input type="radio" name="gender" value="Male"&gt;&lt;i class="fa fa-male"&gt;&lt;/i&gt; Male
                  &lt;/label&gt;
                &lt;/div&gt;
                &lt;h4&gt;Options&lt;/h4&gt;
                &lt;div class="form-group"&gt;
                  &lt;div class="row"&gt;
                    &lt;div class="col-md-6"&gt;
                      Block private chats
                    &lt;/div&gt;
                    &lt;div class="col-md-6"&gt;
                      &lt;input type="checkbox" name="block" data-on-text="Yes" data-off-text="No"&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;button type="submit" name="submit" class="btn btn-lg btn-primary btn-block"&gt;Start&lt;/button&gt;
              &lt;/fieldset&gt;
            &lt;/form&gt;
  </code></pre>