File field error not showing but is in the html

[Tomasz-Kluczkowski]

Hi,

Thanks for your great package!
Small issue I have noticed when running file field validation today.

Background first.

I am using the below tag to get the form rendered:

{% bootstrap_form form layout="horizontal" size="small" label_class="form-label col-md-3" %}

I deliberately caused two errors: username and invalid photo file error. The username error is rendered and displays properly but the file error has its code in the html but does not show at all.

This is the code for the username error:

    <div class="form-group is-invalid row">
        <label class="form-label col-md-3" for="id_username">Username</label>
        <div class="col-md-9">
            <input type="text" name="username" value="test001" maxlength="150" autofocus="" class="form-control form-control-sm is-invalid" placeholder="Username" title="Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only." required="" id="id_username">
            <div class="invalid-feedback">A user with that username already exists.</div>
            <small class="form-text text-muted">Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.</small>

And this is for the file field error:

    <div class="col-md-9">
        <div class="row bootstrap4-multi-input">
            <div class="col-12">
                <input type="file" name="profile_photo" accept="image/*" class="is-invalid" title="Image file, size: 500x500 px, jpeg, png or gif type only." id="id_profile_photo">
            </div>
        </div>
        <div class="invalid-feedback">Extension '.jpg' not allowed. Allowed extensions are: '.doc'.</div>
        <small class="form-text text-muted">Image file, size: 500x500 px, jpeg, png or gif type only.</small>
    </div>

Unfortunately the error for the file upload does not show at all. There is no red border around the field (notice the form-group class missing - if I add it manually the border shows but also the white background, which is not bad, makes it look same as other fields).

I noticed that in the css we have this:

.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: .25rem;
    font-size: 80%;
    color: #dc3545;

So something causes display: none for the file field but for the username field the same css class .invalid-feedback has display: none; crossed out and the error shows.

I attach the relevant screenshots which should help visualise the issue and make debugging easier.

Screenshot 1 - username error properly displays

Screenshot 2 - file field error in html but not displayed

Please if you could look into this it would be really nice. I love the simplicity your package offers and hopefully it can be made better still :).

Take care,

Tomasz

[Tomasz-Kluczkowski]

I just dug in the css code in bootstrap and for the field that works, the key piece is this:

.custom-select.is-invalid~.invalid-feedback, .custom-select.is-invalid~.invalid-tooltip, .form-control.is-invalid~.invalid-feedback, .form-control.is-invalid~.invalid-tooltip, .was-validated .custom-select:invalid~.invalid-feedback, .was-validated .custom-select:invalid~.invalid-tooltip, .was-validated .form-control:invalid~.invalid-feedback, .was-validated .form-control:invalid~.invalid-tooltip {
    display: block;
}

Basically for the file field the nesting of the element with the error is different than the standard text field and the display: block is never enabled!
This rule is not applied then:

   .form-control.is-invalid~.invalid-feedback
       ...
       ... {
            display: block;
        }

And you can see it highlighted in this image below:

Not sure how this can be solved to provide a standardized way of using the {% bootstrap_form form %} tag but I believe that at least I showed some pointers...

[dyve]

Fixed in #146