无法在Bootstrap 4中进行验证

用户1675891：

我正在尝试通过Bootstrap进行验证，并将以下示例粘贴到了我的页面上：

<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" />

我曾尝试用Google搜索此问题，但无济于事。我在摆弄这个问题。

我该怎么办？我想念什么？

吉姆：

从Bootstrap 4 beta版本开始，验证已更改。

有效状态选择器使用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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。