1

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 required).

I tried adding required as shown below but it doesn't work (user can continue without selecting either female or male).

              <div class="form-group btn-group" data-toggle="buttons">
                <label class="btn btn-default btn-lg">
                  <input type="radio" name="gender" value="Female" required><i class="fa fa-female"></i> Female
                </label>
                <label class="btn btn-default btn-lg">
                  <input type="radio" name="gender" value="Male" required><i class="fa fa-male"></i> Male
                </label>
              </div>

Update 1

As suggested in the answers I updated the code so that only one radio input contains required however it still doesn't work.

              <div class="form-group btn-group" data-toggle="buttons">
                <label class="btn btn-default btn-lg">
                  <input type="radio" name="gender" value="Female" required><i class="fa fa-female"></i> Female
                </label>
                <label class="btn btn-default btn-lg">
                  <input type="radio" name="gender" value="Male"><i class="fa fa-male"></i> Male
                </label>
              </div>

Update 2

As requested here is the complete code:

          <form action="/client/index.php" method="post" role="form">
            <fieldset>
              <div class="form-group">
                <input class="form-control input-lg" placeholder="Nickname" name="nickname" type="text" autofocus required>
              </div>
              <div class="form-group btn-group" data-toggle="buttons">
                <label class="btn btn-default btn-lg">
                  <input type="radio" name="gender" value="Female" required><i class="fa fa-female"></i> Female
                </label>
                <label class="btn btn-default btn-lg">
                  <input type="radio" name="gender" value="Male"><i class="fa fa-male"></i> Male
                </label>
              </div>
              <h4>Options</h4>
              <div class="form-group">
                <div class="row">
                  <div class="col-md-6">
                    Block private chats
                  </div>
                  <div class="col-md-6">
                    <input type="checkbox" name="block" data-on-text="Yes" data-off-text="No">
                  </div>
                </div>
              </div>
              <button type="submit" name="submit" class="btn btn-lg btn-primary btn-block">Start</button>
            </fieldset>
          </form>
  • Have you try to looke her: http://stackoverflow.com/questions/8287779/html5-how-to-use-the-required-attribute-in-an-input-field-with-type-radio – Jesper Petersen Apr 17 '15 at 17:19
  • 1
    Check your console for errors: F12 in Chrome or Firefox -> Console Tab. If you see an error, it could cause the remaining Javascript (including Bootstrap validation) to stop working. – Tim Lewis Apr 17 '15 at 17:50
  • @TimLewis `Failed to load resource: the server responded with a status of 404 (Not Found): bootstrap.css.map`. I don't load any `.map` file! –  Apr 17 '15 at 17:51
  • So it can't find that file, and stopped executing because of it. Check that your `` and `` tags are pointing to the correct locations. – Tim Lewis Apr 17 '15 at 17:52
  • What is that file? I've never heard of a map file nor included it. –  Apr 17 '15 at 18:27
  • Possible duplicate of [HTML5: How to use the "required" attribute with a "radio" input field](https://stackoverflow.com/questions/8287779/html5-how-to-use-the-required-attribute-with-a-radio-input-field) – T04435 Jun 20 '17 at 06:02

2 Answers2

2

Just set the required attribute for one input of the radiogroup,

See the fiddle

For eg:

<form>
<label for="input1">1:</label><input type="radio" name="test" id="input1" required value="1" /><br />
<label for="input2">2:</label><input type="radio" name="test" id="input2" value="2" /><br />
<label for="input3">3:</label><input type="radio" name="test" id="input3" value="3" /><br />
<input type="submit" value="send" />
</form>

Update

I just noticed that what you have written in your code works perfectly..See the fiddle..

Lal
  • 14,726
  • 4
  • 45
  • 70
  • ther might be some issue with some other parts of the code..If you can give us the full code or a link to that, we can help you in debugging. – Lal Apr 17 '15 at 17:37
  • Ok..@SMW..I checked it..It works perfectly..see the [fiddle](http://jsfiddle.net/lalu050/7kL611du/) – Lal Apr 17 '15 at 17:43
-1

To do this, use required attribute

The required attribute is a boolean attribute.

When present, it specifies that an input field must be filled out before submitting the form.

Note: The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

The source: http://www.w3schools.com/tags/att_input_required.asp

Example Demo

UPDATE: Test your code in fiddle

  • Please read my question. I am already using `required` and it doesn't work, hence asking the question. –  Apr 17 '15 at 17:37
  • @SMW I was testing your code to work correctly. see demo: https://jsfiddle.net/alihesari/m8gLkv7n/ –  Apr 17 '15 at 17:42