Html 无法在 Bootstrap 4 中进行验证

Can't make the validation work in Bootstrap 4

提问by Zim

I'm trying to implement validation by Bootstrapand I've pasted the following sample on my page:

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

I can see that the appearance of the input control has changed (it's a bit rounded and much more aesthetic now) butit still doesn't show the green border as can be seen on the page linked to. The Bootstrap I'm linking to is pointed out as follows.

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

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

I have tried to google for this issue but to no avail. I have a fiddle illustrating the issue.

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

What can I do about it? What am I missing?

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

回答by Zim

Validation has changed as of the Bootstrap 4 beta release.

自 Bootstrap 4 beta 版本起，验证已更改。

The valid state selectors use the was-validatedclass which would be added dynamically after validating the form via client-sideJavaScript. For example...

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

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

Update 2019 - Bootstrap 4.0.0
Form Validation Example Demo

2019 年更新 - Bootstrap 4.0.0
表单验证示例演示

---

---

As explained in the docs, if you intend to use server-sidevalidation you can simply set the is-validor is-invalidclasses on the form-controls...

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

回答by Blaise

It appears the validation changes again in the final release version of Bootstrap 4: http://getbootstrap.com/docs/4.0/components/forms/#validation.

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

It becomes more complicated than I thought.

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

Custom style client side validation is recommended:

推荐自定义样式客户端验证：

1. When validated, the form adds a class named was-validated.
2. Feedback messages are wrapped within .valid-feedbackor .invalid-feedback.

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

For server-side validation:

对于服务器端验证：

1. No need for was-validatedclass on the <form>tag.
2. Add .is-validor .is-invalidon the input control.
3. Add .invalid-feedbackor .valid-feedbackfor the feedback message.

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