twitter-bootstrap 如何使无线电输入成为必需？

How to make radio inputs required?

提问by Lal

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

我在表单中有无线电输入供用户选择他们的性别。我如何使性别成为必需的输入（用户必须选择女性或男性，否则他们会像往常一样得到提示required）。

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

我尝试添加required如下所示，但它不起作用（用户可以继续而不选择女性或男性）。

              <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

更新 1

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

正如答案中所建议的，我更新了代码，以便只有一个无线电输入包含required但它仍然不起作用。

              <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

更新 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>

回答by Lal

Just set the requiredattribute for one input of the radiogroup,

只需required为 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..

我只是注意到您在代码中编写的内容完美无缺..See the fiddle..

回答by Lal

To do this, use required attribute

为此，请使用 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.

注意： required 属性适用于以下输入类型：文本、搜索、url、电话、电子邮件、密码、日期选择器、数字、复选框、收音机和文件。

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

来源：http: //www.w3schools.com/tags/att_input_required.asp

Example Demo

示例演示

UPDATE:Test your code in fiddle

更新：用小提琴测试你的代码