fix(pat validation): Also validate date/time inputs when the value is empty.

This clears eventual validation errors when the date input is cleared.

Author: thet

src/pat/validation/validation.js

@@ -138,20 +138,7 @@ export default Base.extend({
                 const msg = input_options.message.date || input_options.message.datetime;
 
                 let not_after;
-                let not_before;
                 let not_after_el;
-                let not_before_el;
-
-                if (!utils.is_iso_date_time(input.value, true)) {
-                    // Not a valid date at all, return.
-                    return;
-                }
-                const date = new Date(input.value);
-                if (isNaN(date)) {
-                    // Not a valid date, return.
-                    // Should not happen or input only partially typed in.
-                    return;
-                }
                 if (input_options.not.after) {
                     if (utils.is_iso_date_time(input_options.not.after, true)) {
                         not_after = new Date(input_options.not.after);
@@ -166,6 +153,9 @@ export default Base.extend({
                     // Use null if no valid date.
                     not_after = isNaN(not_after) ? null : not_after;
                 }
+
+                let not_before;
+                let not_before_el;
                 if (input_options.not.before) {
                     if (utils.is_iso_date_time(input_options.not.before, true)) {
                         not_before = new Date(input_options.not.before);
@@ -180,11 +170,22 @@ export default Base.extend({
                     // Use null if no valid date.
                     not_before = isNaN(not_before) ? null : not_before;
                 }
-                if (not_after && date > not_after) {
-                    this.set_validity({ input: input, msg: msg });
-                } else if (not_before && date < not_before) {
-                    this.set_validity({ input: input, msg: msg });
+
+                if (
+                    input.value &&
+                    utils.is_iso_date_time(input.value, true) &&
+                    !isNaN(new Date(input.value))
+                ) {
+                    // That's 1 valid date!
+                    const date = new Date(input.value);
+
+                    if (not_after && date > not_after) {
+                        this.set_validity({ input: input, msg: msg });
+                    } else if (not_before && date < not_before) {
+                        this.set_validity({ input: input, msg: msg });
+                    }
                 }
+
                 // always check the other input to clear/set errors
                 !stop && // do not re-check when stop is set to avoid infinite loops
                     not_after_el &&

src/pat/validation/validation.test.js

@@ -864,6 +864,20 @@ describe("pat-validation", function () {
         inp_start.dispatchEvent(events.change_event());
         await utils.timeout(1); // wait a tick for async to settle.
         expect(el.querySelectorAll("em.warning").length).toBe(0);
+
+        // Violate the constraint again...
+        inp_start.value = "2020-10-11";
+        inp_start.dispatchEvent(events.change_event());
+        inp_end.value = "2020-10-10";
+        inp_end.dispatchEvent(events.change_event());
+        await utils.timeout(1); // wait a tick for async to settle.
+        expect(el.querySelectorAll("em.warning").length).toBe(2);
+
+        // Clearing one of the optional values should clear all errors.
+        inp_start.value = "";
+        inp_start.dispatchEvent(events.change_event());
+        await utils.timeout(1); // wait a tick for async to settle.
+        expect(el.querySelectorAll("em.warning").length).toBe(0);
     });
 
     it("5.6 - doesn't validate empty optional dates", async function () {