twitter-bootstrap - 在 Bootstrap 中定义一个 `required` 字段

Question

如何在 Twitter Bootstrap 3 中根据需要定义文本字段（带有红色边框）？

required="required"不工作...

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Answer 1

尝试required="true"在引导程序 3 中使用

Answer 2

2018 年更新

由于原始答案现在所有现代浏览器都支持 HTML5 验证。现在，使字段成为必填项的最简单方法就是使用 required 属性。

<input type="email" class="form-control" id="exampleInputEmail1" required>

或在兼容的 HTML5 中：

<input type="email" class="form-control" id="exampleInputEmail1" required="true">

阅读有关 Bootstrap 4 验证的更多信息

---

在 Bootstrap 3 中，您可以将“验证状态”类应用于父元素： http: //getbootstrap.com/css/#forms-control-validation

例如has-error将在输入周围显示一个红色边框。但是，这不会影响该字段的实际验证。您需要添加一些额外的客户端 (javascript) 或服务器逻辑以使该字段成为必填项。

演示：http ://bootply.com/90564

---

Answer 3

查看原生 HTML5 表单验证：

http://www.the-art-of-web.com/html/html5-form-validation/

Answer 4

可以通过 data-api 或 JavaScript 在标记中启用表单验证。data-toggle="validator"通过添加到表单元素来自动启用表单验证。

<form role="form" data-toggle="validator">
   ...
</form>

或者通过 JavaScript 激活验证：

$('#myForm').validator()

并且您需要在输入字段中使用required标志

更多详情请点击这里

Answer 5

如果您在表单上附加了以下内容，则无法使用： novalidate="novalidate" 。

Answer 6

要使字段成为必填项，请使用required或required="true"

我认为required="required"在 bootstrap 的第 3 版中已弃用。

Answer 7

除了表单组之外，使用“需要验证”，它会起作用。