Bootstrap 4-alpha6：自定义文件控件验证反馈

Question

我已经在我的表单中实现了新的自定义文件控件，它看起来很棒。有没有人知道如何（以及是否）可以应用验证反馈（成功、警告、带有图标的危险状态）？

（如果它还没有实现，我不会感到惊讶或失望，特别是因为 BS4 仍处于 alpha 阶段。我只是想澄清它是否存在，我只是想念它。）

澄清点： 我指的是：https://v4-alpha.getbootstrap.com/components/forms/#file-browser。我已多次阅读文档，但出于某种原因，要么我遗漏了某些内容，要么自定义文件控件尚未启用上下文验证样式？

示例：

<div class="form-group row has-danger">
  <label for="file1" class=" col-sm-3 col-form-label">File Input</label>
  <div class="col-sm-9">
    <div class="custom-file" style="display: block;">
      <input class="custom-file-input" name="file1" type="file">
      <span class="custom-file-control form-control-danger"></span>
    </div>
    <small class="form-control-feedback">The file1 field is required.</small>
  </div>
</div>

这与预期的格式不符，似乎也没有任何关于验证格式选项的文档。这是结果的图像，URL 字段格式符合预期，自定义文件字段不是：

Answer 1

您可以使用 JavaScript 向输入添加验证类。文档是：http://v4-alpha.getbootstrap.com/components/forms/#validation

简而言之，您可以添加的类是

.has-danger

.has-warning

.has-success

Answer 2

编辑

对于 file input，您需要额外的 JS，如文档中所述

The file input is the most gnarly of the bunch and require additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.

基本上与您在 V3 中所做的相同，将类添加到您的元素。

检查 Documentation bootstrap V4 alpha

How it works

Here’s a rundown of how they work:

To use, add .has-warning, .has-danger, or .has-success to the parent element. Any .col-form-label, .form-control, or custom form element will receive the validation styles.

Contextual validation text, in addition to your usual form field help text, can be added with the use of .form-control-feedback. This text will adapt to the parent .has-* class. By default it only includes a bit of margin for spacing and a modified color for each state.

Validation icons are url()s configured via Sass variables that are applied to background-image declarations for each state.

You may use your own base64 PNGs or SVGs by updating the Sass variables and recompiling.

Icons can also be disabled entirely by setting the variables to none or commenting out the source Sass.

查看他们的示例 documentation

片段

.custom-file-control::after {
  content: "Choose file...";
}

.custom-file-control::before {
  content: "Browse";
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<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>
<div class="form-group has-warning">
  <label class="form-control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control form-control-warning" id="inputWarning1">
  <div class="form-control-feedback">Shucks, check the formatting of that and try again.</div>
  <small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
<div class="form-group has-danger">
  <label class="form-control-label" for="inputDanger1">Input with danger</label>
  <input type="text" class="form-control form-control-danger" id="inputDanger1">
  <div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
  <small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>

<label class="custom-file">
  <input type="file" id="file" class="custom-file-input">
  <span class="custom-file-control"></span>
</label>

Bootstrap 4-alpha6：自定义文件控件验证反馈

Bootstrap 4-alpha6: Custom File Control Validation Feedback

html

input

twitter-bootstrap

twitter-bootstrap-4

bootstrap-4

How it works