add comment why onblur is needed

src/pretix/presale/forms/renderers.py

@@ -65,6 +65,8 @@ def render_label(content, label_for=None, label_class=None, label_title='', labe
     elif not optional:
         opt += '<i class="label-required">{}</i>'.format(pgettext('form', 'required'))
 
+    opt += '<strong class="label-alert" role="alert"></strong>'
+
     builder = '<{tag}{attrs}>{content}{opt}</{tag}>'
     return format_html(
         builder,

src/pretix/static/pretixpresale/js/ui/main.js

@@ -60,6 +60,7 @@ var form_handlers = function (el) {
             locale: $("body").attr("data-datetimelocale"),
             useCurrent: false,
             showClear: !$(this).prop("required"),
+            keepInvalid: true,
             icons: {
                 time: 'fa fa-clock-o',
                 date: 'fa fa-calendar',
@@ -82,6 +83,8 @@ var form_handlers = function (el) {
                     Math.abs(+new Date(opts.minDate) - new Date()) < Math.abs(+new Date(opts.maxDate) - new Date())
             ) ? opts.minDate : opts.maxDate;
         }
+        var container = $(this).closest(".form-group");
+        var alert = $('.label-alert', container);
         $(this).datetimepicker(opts).on("dp.hide", function() {
             // when min/max is used in datetimepicker, closing and re-opening the picker opens at the wrong date
             // therefore keep the current viewDate and re-set it after datetimepicker is done hiding
@@ -90,7 +93,32 @@ var form_handlers = function (el) {
             window.setTimeout(function () {
                 $dtp.viewDate(currentViewDate);
             }, 50);
+        }).on('dp.error', function (e) {
+            container.addClass("has-error");
+            if (e.date) {
+                if (e.date.isBefore(opts["minDate"])) {
+                    alert.text(gettext("The date you entered is too early."));
+                } else if (e.date.isAfter(opts["maxDate"])) {
+                    alert.text(gettext("The date you entered is too late."));
+                }
+            } else {
+                alert.text(gettext("We could not recognize the date you entered."));
+            }
+            var self = this;
+            window.setTimeout(function () {
+                self.focus();
+            }, 50);
+        }).on('dp.change', function (e) {
+            container.removeClass("has-error");
+            alert.text("");
+        }).on('blur', function (e) {// dp.change does not trigger when changed to empty string - although documentation notes otherwise
+            if (!this.value) {
+                container.removeClass("has-error");
+                alert.text("");
+            }
         });
+        
+
         if ($(this).parent().is('.splitdatetimerow')) {
             $(this).on("dp.change", function (ev) {
                 var $timepicker = $(this).closest(".splitdatetimerow").find(".timepickerfield");

src/pretix/static/pretixpresale/scss/_forms.scss

@@ -145,15 +145,20 @@ output {
   color: $brand-primary;
   font-weight: bold;
 }
-.label-required {
+
-  color: $text-muted;
+.label-required,
-  display: block;
+.label-alert {
+  display: inline;
   font-weight: normal;
   font-style: normal;
   font-size: 85%;
+  color: $text-muted;
 }
-.checkbox .label-required {
+.has-error .label-required,
-  display: inline;
+.has-error .label-alert {
+  color: inherit;
+}
+.label-required {
   &:before {
     content: " (";
   }
@@ -161,6 +166,22 @@ output {
     content: ")";
   }
 }
+.label-alert:not(:empty):before {
+  content: " – ";
+}
+@media (min-width: $screen-md-min) {
+  .form-group:not(:has(.checkbox)) {
+    .label-required,
+    .label-alert:not(:empty) {
+      display: block;
+    }
+    .label-required:before,
+    .label-required:after,
+    .label-alert:before {
+      content: "";
+    }
+  }
+}
 
 .form-control-text {
   padding-top: 7px;