django-bootstrap-datepicker-plus

django-bootstrap-datepicker-plus copied to clipboard

When a validation message is produced server-side by Django on a field that has been set to use DatePickerInput, the validation message will not appear even though it is present in the DOM. This is because of Bootstrap's CSS rule that requires the .invalid-feedback element to have the same parent as the .form-control.is-invalid element (the input element usually), but when using this widget the input element gets wrapped in a div and they no longer share the same parent.

Here's what the current HTML output (simplified, removing dp-config and such) looks like:

<div class="form-group end-timing is-invalid">
  <label for="id_account-end">End Date</label>
  <div class="input-group date">
    <input type="text" name="account-end" id="id_account-end" class="form-control is-invalid">
    <div class="input-group-addon input-group-append">
        <div class="input-group-text"><i class="glyphicon glyphicon-calendar"></i></div>
    </div>
  </div>
  <!-- Note the following div does not appear -->
  <div class="invalid-feedback">End date cannot be before the start date</div>
</div>

And here's how I can make it work when manually modifying the DOM. Note that the .invalid-feedback div gets moved to the end of the .input-group div:

<div class="form-group end-timing is-invalid">
  <label for="id_account-end">End Date</label>
  <div class="input-group date">
    <input type="text" name="account-end" id="id_account-end" class="form-control is-invalid">
    <div class="input-group-addon input-group-append">
        <div class="input-group-text"><i class="glyphicon glyphicon-calendar"></i></div>
    </div>
    <div class="invalid-feedback">End date cannot be before the start date</div>
  </div>
</div>

This may be due to a conflict with the django-bootstrap4 library as well, as there was an issue there with a similar cause that was merged to fix it, but I think that the fix for this problem probably lies here because of the way the datepicker template is outputting the relevant code blocks.

I'm just not familiar enough yet with Django templates and apps to propose a PR, just to be able to diagnose the underlying issue. Thanks for the help!

To Reproduce

1. Create a form with a DatePickerInput widget.
2. Cause the form to throw a ValidationError exception to create an .invalid-feedback message to appear after submitting the form.
3. Observe that the datepicker widget does have the red border around it indicating an error, but the error message itself does not display.

Expected behavior Validation messages (.valid-feedback or '.invalid-feedback) would appear if the field also has the corresponding .is-[in]valid` class applied.

Screenshots Current behavior:

Expected behavior:

Setup Information:

• OS: macOS 10.14.4
• Browser: All
• Python: 3.7
• Django: 2.2
• Bootstrap: 4 (using django-bootstrap4)
• jQuery: 3.31

[x] I have followed the configuration instructions and checked out the common error troubleshooting page.

Thanks for your feedback, well researched, will definitely look into this asap. Btw, if you are just into validate the date range you can use the date range feature of this widget.

What is the status of this issue? I need to display a custom error message if under certain conditions a date has been filled in that should not have been filled in.

For any others having this issue, root cause seems to be bootstrap _forms.scss setting display:none to .invalid-feedback Quick fix is to add your own css with div.invalid-feedback { display: block !important; }

Fixed in version 5.0.0.