Components: Input, ListInput - add onValidate callback

Author: nolimits4web

src/phenome/components/input.jsx

@@ -44,6 +44,7 @@ export default {
     pattern: String,
     validate: [Boolean, String],
     validateOnBlur: Boolean,
+    onValidate: Function,
     tabindex: [String, Number],
     resizable: Boolean,
     clearButton: Boolean,
@@ -497,12 +498,14 @@ export default {
       if (!f7 || !inputEl) return;
       const validity = inputEl.validity;
       if (!validity) return;
-
+      const { onValidate } = self.props;
       if (!validity.valid) {
+        if (onValidate) onValidate(false);
         if (self.state.inputInvalid !== true) {
           self.setState({ inputInvalid: true });
         }
       } else if (self.state.inputInvalid !== false) {
+        if (onValidate) onValidate(true);
         self.setState({ inputInvalid: false });
       }
     },

src/phenome/components/list-input.jsx

@@ -64,6 +64,7 @@ export default {
     pattern: String,
     validate: [Boolean, String],
     validateOnBlur: Boolean,
+    onValidate: Function,
     tabindex: [String, Number],
     resizable: Boolean,
     clearButton: Boolean,
@@ -540,12 +541,14 @@ export default {
       if (!f7 || !inputEl) return;
       const validity = inputEl.validity;
       if (!validity) return;
-
+      const { onValidate } = self.props;
       if (!validity.valid) {
+        if (onValidate) onValidate(false);
         if (self.state.inputInvalid !== true) {
           self.setState({ inputInvalid: true });
         }
       } else if (self.state.inputInvalid !== false) {
+        if (onValidate) onValidate(true);
         self.setState({ inputInvalid: false });
       }
     },

src/svelte/components/input.svelte

@@ -43,6 +43,7 @@
   export let pattern = undefined;
   export let validate = undefined;
   export let validateOnBlur = undefined;
+  export let onValidate = undefined;
   export let tabindex = undefined;
   export let resizable = undefined;
   export let clearButton = undefined;
@@ -101,10 +102,12 @@
     if (!validity) return;
 
     if (!validity.valid) {
+      if (onValidate) onValidate(false);
       if (inputInvalid !== true) {
         inputInvalid = true;
       }
     } else if (inputInvalid !== false) {
+      if (onValidate) onValidate(true);
       inputInvalid = false;
     }
   }

src/svelte/components/list-input.svelte

@@ -48,6 +48,7 @@
   export let pattern = undefined;
   export let validate = undefined;
   export let validateOnBlur = undefined;
+  export let onValidate = undefined;
   export let tabindex = undefined;
   export let resizable = undefined;
   export let clearButton = undefined;
@@ -110,10 +111,12 @@
     if (!validity) return;
 
     if (!validity.valid) {
+      if (onValidate) onValidate(false);
       if (inputInvalid !== true) {
         inputInvalid = true;
       }
     } else if (inputInvalid !== false) {
+      if (onValidate) onValidate(true);
       inputInvalid = false;
     }
   }