28

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

我试图用谷歌搜索这个问题，但无济于事。我有一个说明这个问题的小提琴。

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

4

3 回答 3

42

引导程序 5（2021 年更新）

由于 Bootstrap 5 不再需要 jQuery，因此很容易使用 vanilla JavaScript 进行客户端验证。文档包含一个通用代码示例，该示例适用于所有带有needs-validation..

(function () {
    'use strict'

    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.querySelectorAll('.needs-validation')

    // Loop over them and prevent submission
    Array.prototype.slice.call(forms)
        .forEach(function (form) {
        form.addEventListener('submit', function (event) {
            if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
            }

            form.classList.add('was-validated')
        }, false)
        })
})()

Bootstrap 5 表单验证演示

Bootstrap 4（原始答案）

自 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://codeply.com/go/45rU7UOhFo

表单验证示例演示 - 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>
于 2017-08-29T12:15:11.090 回答
17

在 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用于反馈消息。
于 2018-02-06T14:37:41.543 回答
0

我的简单方法....

<input type="text" class="form-control" id="unombre" 
placeholder="su nombre"  name="vnombre" required 
onblur="valida(this.id)">

<script>
function valida(v) {
var dato = document.getElementById(v).value
document.getElementById(v).className +=' is-valid';
}
</script>
于 2022-02-04T23:02:21.103 回答