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

尝试在bootstrap 3中使用required="true"

Answer 2

更新2018年

由于现在所有现代浏览器都支持原始答案HTML5验证。现在，最简单的方法就是使用所需的属性。

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

或符合HTML5：

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

Read more on Bootstrap 4 validation

在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()

您需要在输入字段

中使用必需的标记

有关详细信息Click Here

Answer 5

如果您的表格中包含以下内容，则无法使用：novalidate =“novalidate”。

Answer 6

要创建所需字段，请使用required或required="true"

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

Answer 7

除了窗体组以外，还需要使用“需要验证”，它将起作用。

在Bootstrap中定义一个`required`字段

7 个答案: