Question

我试图激活validation by Bootstrap，并且已经粘贴在我页面上的follownig示例中。

<div class="form-group has-success">
  <label class="form-control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control form-control-success" id="inputSuccess1">
  <div class="form-control-feedback">Success! You've done it.</div>
  <small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>

我可以看到输入控件的外观已经改变了（它现在有点圆润，更美观）但是它仍然没有显示绿色边框可以在链接的页面上看到。我链接到的Bootstrap指出如下。

<link rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" />

试着去研究这个问题，我只是到了一个链接到官方网站的例子，我从那里得到了我的样本，所以在那里帮助我很少。我有a fiddle illustrating the issue。

我该怎么办？我错过了什么？

Answer 1

自Bootstrap 4 beta release开始验证已更改。

有效状态选择器使用was-validated类，该类将在通过客户端 JavaScript验证表单后动态添加。例如......

<form class="container was-validated" novalidate="">
    <div class="form-group">
        <label class="form-control-label" for="inputSuccess1">Input with success</label>
        <input type="text" class="form-control" name="i1" id="inputSuccess1">
        <div class="valid-feedback">Success! You've done it.</div>
    </div>
    <div class="form-group">
        <label class="form-control-label" for="inputSuccess2">Input with danger</label>
        <input type="text" class="form-control" name="i2" required="" id="inputSuccess2">
        <div class="invalid-feedback">That didn't work.</div>
    </div>
    <div class="">
        <button type="submit" class="btn btn-secondary">Text</button>
    </div>
</form>

https://www.codeply.com/go/45rU7UOhFo

更新2018 - Bootstrap 4.0.0
Form Validation Example Demo

正如文档中所述，如果您打算使用服务器端验证，只需设置 is-valid 或 {{1}表单控件上的类 ...

is-invalid

Answer 2

在Bootstrap 4的最终版本中，验证似乎再次发生变化：http://getbootstrap.com/docs/4.0/components/forms/#validation。

它比我想象的要复杂得多。

建议使用自定义样式客户端验证：

验证后，表单会添加一个名为was-validated。
反馈消息包含在.valid-feedback或.invalid-feedback中。

对于服务器端验证：

was-validated代码无需<form>课程。
在输入控件上添加.is-valid或.is-invalid。
为反馈消息添加.invalid-feedback或.valid-feedback。

无法在Bootstrap 4中进行验证工作

2 个答案: