无法在Bootstrap 4中进行验证

小编典典

无法在Bootstrap 4中进行验证

css

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

尝试用googlearch问题，我只获得示例链接到从中获得示例的官方站点，因此在此方面几乎没有什么帮助。我在摆弄这个问题。

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

阅读 425

2020-05-16

共1个答案

小编典典

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

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

如文档中所述，如果您打算使用 服务器端 验证，则只需在表单控件上设置 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>

2020-05-16