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

Question

我正在尝试通过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" />

试图解决这个问题,我只得到了一些链接到官方网站的例子,我从那里得到了我的样本,所以在那里帮助我很少.我有一个小提琴来说明这个问题.

我能做些什么呢？我错过了什么？

Answer 1

自Bootstrap 4测试版发布以来,验证已发生变化.

有效的状态选择器使用在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
表单验证示例演示

正如文档中所解释的,如果您打算使用服务器端验证,您只需在表单控件上设置is-valid或is-invalid类...

<form class="container">
    <div class="form-group">
        <label class="form-control-label" for="inputSuccess1">Input with success</label>
        <input type="text" class="form-control is-valid" id="inputSuccess1">
        <div class="valid-feedback">Success! You've done it.</div>
    </div>
</form>

Answer 2

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

它变得比我想象的更复杂.

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

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

对于服务器端验证:

1. 标签was-validated上不需要课程<form>.
2. 添加.is-valid或.is-invalid输入控件.
3. 添加.invalid-feedback或.valid-feedback收到反馈消息.