Form Validation - Validate File

[prbrazildev]

bootstrap/scss/mixins/_forms.scss

Line 53 in 2f4e785

.form-control,

I would like to add a file validation on the following form:

.form-control,
.form-control-file,

[mdo]

Agreed, this would be rad. It won't be possible for custom file inputs though; their overall styling requires markup that features a <label> wrapping around an <input>.

[ysds]

@mdo We can not change the style of <input type="file">, but how about adding support for validation feedback?

  .form-control-file {
    .was-validated &:#{$state},
    &.is-#{$state} {
      ~ .#{$state}-feedback,
      ~ .#{$state}-tooltip {
        display: block;
      }
    }
  }

[philgyford]

This does seem like a bug.

For example, .invalid-feedback elements do not show up when they're immediately after .form-control-file.is-invalid elements, but they do when after .form-control.is-invalid elements.

In fact this was reported in #24831 but I think the fix there only fixed the situation for custom file inputs, rather than the standard ones.

Here's a demonstration (copied from that issue but with Boostratp v4.0.0): https://jsbin.com/vodacon/edit?html,output